HTML 단추의 전체 스타일 제거/제출

HTML 단추의 전체 스타일 제거/제출

Internet Explorer에서 단추 스타일을 완전히 제거하는 방법이 있습니까?저는 단추에 CSS 스프라이트를 사용하는데, 모든 것이 괜찮아 보입니다.

하지만 제가 버튼을 클릭했을 때, 그것은 약간 위로 이동하고, 그것은 모양이 안 좋아 보이게 합니다.CSS 클릭 상태 또는 마우스다운 상태가 있습니까?무엇이 그 상태를 유발하는지 모르겠습니다.

그게 정말 큰 문제가 아니라는 건 알지만, 가끔은 작은 것들이 중요합니다.

저는 이것이 더 철저한 접근법을 제공한다고 생각합니다.

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

<button>Example</button>

당신의 질문은 "Internet Explorer"로 표시되지만, 다른 브라우저에 관심이 있는 사람들을 사용할 수 있습니다.all: unset단추를 눌러 스타일을 변경합니다.

IE에서는 작동하지 않지만, 다른 모든 곳에서 잘 지원됩니다.

https://caniuse.com/css-all

내게 필요한 옵션 경고:마우스 포인터를 사용하지 않는 사용자를 위해 일부를 다시 추가하십시오.:focus스타일링(예:button:focus { outline: orange auto 5px }키보드를 쉽게 사용할 수 있습니다.만약 당신이 게으르다면, 당신은 할 수 있습니다.button:focus { outline: revert }개요를 브라우저의 기본값으로 되돌립니다.https://caniuse.com/css-revert-value

그리고 잊지 마세요.cursor: pointer. all: unset를 포함한 모든 스타일을 제거합니다.cursor: pointer단추 위에 마우스 커서를 놓으면 마우스 커서가 가리키는 손처럼 보입니다.당신은 거의 확실히 그것을 되찾고 싶어합니다.

button {
  all: unset;
  cursor: pointer;
}

button:focus {
  outline: revert;
}

<button>check it out</button>

'버튼을 클릭하면 조금 위로 이동한다'고 하면 버튼에 대한 마우스 다운 클릭 상태를 말하는 것이고, 마우스 클릭을 해제하면 정상 상태로 돌아간다고 가정합니다.또한 다음을 사용하여 단추의 기본 렌더링을 사용하지 않도록 설정합니다.

input, button, submit { border:none; } 

그렇다면..

개인적으로 이 IE 기본 동작을 실제로 중지/오버라이드/비활성화할 수 없다는 것을 알게 되었습니다. 따라서 이 동작을 허용하고 다양한 상태의 단추 모양에 영향을 주지 않도록 마크업을 약간 변경했습니다.

이것이 저의 마지막 마크업입니다.

<span class="your-button-class">
    <span>
        <input type="Submit" value="View Person">
    </span>
</span>

부트스트랩 4가 가장 쉽습니다.클래스를 사용할 수 있습니다.bg-transparent그리고.border-0

단추에서 테두리를 제거해 보십시오.

input, button, submit
{
  border:none;
}

단추에 간단한 스타일 추가

.btn {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

버튼이 "활성" 상태인 것 같습니다.

언급URL : https://stackoverflow.com/questions/2460100/remove-the-complete-styling-of-an-html-button-submit