크롬의 입력 강조 표시/초점 테두리를 재설정/제거하는 방법은 무엇입니까?

크롬의 입력 강조 표시/초점 테두리를 재설정/제거하는 방법은 무엇입니까?

이 질문에는 이미 다음과 같은 답이 있습니다.

텍스트/입력 상자 주변의 포커스 테두리(아웃라인)를 제거하는 방법은 무엇입니까?(크롬) (11개 답변)

닫힘8년 전에.

크롬이 더 두꺼운 테두리를 씌우는 것을 보았습니다.:focus하지만 제 경우에도 국경 반경을 사용한 적이 있는 것은 좀 이상해 보입니다.그것을 제거할 방법이 있습니까?

다음을 사용하여 제거할 수 있어야 합니다.

outline: none;

그러나 이것은 잠재적으로 유용성에 좋지 않습니다.키를 사용하여 양식의 모든 요소를 통과할 때 흡입될 수 있는 요소가 집중되어 있는지 여부를 구분하기 어렵습니다. 요소가 집중되어 있을 때 어떻게든 반영해야 합니다.

완전히 제거하려면 다음 작업을 모두 수행해야 했습니다.

outline-style: none;
box-shadow: none;
border-color: transparent;

예:

button {
  border-radius: 20px;
  padding: 20px;
}

.no-focusborder:focus {
  outline-style: none;
  box-shadow: none;
  border-color: transparent;
  background-color: black;
  color: white;
}

<p>Click in the white space, then press the "Tab" key.</p>
<button>Button 1 (unchanged)</button>
<button class="no-focusborder">Button 2 (no focus border, custom focus indicator to show focus is present but the unwanted highlight is gone)</button>
<br/><br/><br/><br/><br/><br/>

기본 포커스를 제거하려면 기본 .css 파일에서 다음을 사용합니다.

:focus {outline:none;}

그런 다음 요소별로 또는 기본 .css에서 포커스 테두리 색을 개별적으로 제어할 수 있습니다.

:focus {outline:none;border:1px solid red}

분명히 교체red선택한 16진수 코드를 사용합니다.

테두리를 그대로 두고 배경색(또는 이미지)을 제어하여 필드를 강조 표시할 수도 있습니다.

:focus {outline:none;background-color:red}

:-)

이것은 분명히 효과가 있을 것입니다.주황색 윤곽선이 더 이상 나타나지 않습니다.모든 태그에 공통:

*:focus {
    outline: none;
   }

일부 태그(예: 입력 태그)에만 해당됨

input:focus{
   outline:none;
  }

border:0;
outline:none;
box-shadow:none;

이 정도면 효과가 있을 겁니다.

가장 간단한 방법은 이와 같은 것을 사용하는 것이지만 별로 좋지 않을 수도 있습니다.

input {
  outline: none;
}

이것이 도움이 되길 바랍니다.

당신은 그냥 설정할 수 있습니다.outline: none;초점에 맞춰 다른 색으로 경계를 그립니다.

문제는 당신이 이미 개요를 가지고 있을 때입니다.크롬은 여전히 무언가를 바꾸고 그것은 정말 고통입니다.변경할 내용을 찾을 수 없습니다.

.search input {
  outline: .5em solid black;
  width:41%;
  background-color:white;
  border:none;
  font-size:1.4em;
  padding: 0 0.5em 0 0.5em;
  border-radius:3px;
  margin:0;
  height:2em;
}

.search input:focus, .search input:hover {
  outline: .5em solid black !important;
  box-shadow:none;
  border-color:transparent;;
 }

.search button {
  border:none;
  outline: .5em solid black;
  color:white;
  font-size:1.4em;
  padding: 0 0.9em 0 0.9em;
  border-radius: 3px;
  margin:0;
  height:2em;
  background: -webkit-gradient(linear, left top, left bottom, from(#4EB4F8), to(#4198DE));
  background: -webkit-linear-gradient(#4EB4F8, #4198DE);
  background: -moz-linear-gradient(top, #4EB4F8, #4198DE);
  background: -ms-linear-gradient(#4EB4F8, #4198DE);
  background: -o-linear-gradient(#4EB4F8, #4198DE);
  background: linear-gradient(#4EB4F8, #4198DE);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4EB4F8', endColorstr='#4198DE');
  zoom: 1;
}

언급URL : https://stackoverflow.com/questions/2943548/how-to-reset-remove-chromes-input-highlighting-focus-border