HTML 버튼 / 제출의 전체 스타일 제거

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

하지만 버튼을 클릭하면 조금 위로 이동하여 모양이 엉망이됩니다. CSS 클릭 상태 또는 mousedown이 있습니까? 나는 그 상태를 유발하는 것이 무엇인지 모릅니다.

나는 그것이 정말로 큰 문제가 아니라는 것을 알고 있지만 때로는 중요한 것이 작은 것입니다.

나는 당신이 ' 버튼을 클릭하면 약간 위로 이동 '이라고 말하면 버튼 의 마우스 다운 클릭 상태에 대해 이야기하고 마우스 클릭을 놓으면 정상 상태로 돌아 간다고 가정합니다 ? 그리고 다음을 사용하여 버튼의 기본 렌더링을 비활성화합니다.

input, button, submit { border:none; } 

그렇다면..

개인적으로이 IE 기본 작업을 실제로 중지 / 재정의 / 비활성화 할 수 없음을 발견했습니다. 이로 인해이 동작을 허용하고 다양한 상태에 대한 버튼의 전체적인 모양에 영향을주지 않도록 마크 업을 약간 변경했습니다.

이것이 내 마지막 마크 업입니다.

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

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

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 또는 Edge 18에서는 작동하지 않지만 다른 곳에서는 잘 지원됩니다.

https://caniuse.com/#feat=css-all

Safari 색상 경고 : WebKit의 버그 로 인해 Safari 13.1에서 color사용 후 버튼 텍스트 설정이 all: unset실패 할 수 있습니다 . (이 버그는 Safari 14 이상에서 수정 될 예정입니다.) " 는 검은 색 으로 설정 되어 있으며 색상이 무시됩니다." 당신이 세트 텍스트에 필요한 경우 사용 후 , 모두 설정해야 하고,를 같은 색으로.all: unset-webkit-text-fill-colorcolorall: unsetcolor-webkit-text-fill-color

접근성 경고 : 마우스 포인터를 사용하지 않는 사용자를 위해 키보드 접근성:focus 과 같은 스타일 을 다시 추가해야합니다 .button:focus { outline: orange auto 5px }

그리고 잊지 마세요 cursor: pointer. all: unset를 포함하여 모든 스타일을 제거 cursor: pointer하여 버튼 위로 마우스를 가져 가면 마우스 커서가 가리키는 손처럼 보이게합니다. 당신은 거의 확실하게 그것을 되찾고 싶어합니다.

button {
  all: unset;
  color: blue;
  -webkit-text-fill-color: blue;
  cursor: pointer;
}

button:focus {
  outline: orange 5px auto;
}

<button>check it out</button>

버튼에서 테두리를 제거해보세요.

input, button, submit
{
  border:none;
}

부트 스트랩 4에서는 가장 쉽습니다. 당신은 클래스를 사용할 수 있습니다 bg-transparent및border-0

버튼 "활성"상태라고 생각합니다.

버튼에 간단한 스타일 추가

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