[css] Safari / Chrome 텍스트 입력 / 텍스트 영역 글로우 제거

CSS를 사용하여 텍스트 입력 / 텍스트 영역을 클릭 할 때 기본 파란색과 노란색 광선을 제거 할 수 있는지 궁금합니다.

textarea, select, input, button { outline: none; }

글로우 / 아웃 라인을 유지하는 것은 실제로 사용자가 어떤 요소가 현재 초점을 맞추고 있는지 알 수 있기 때문에 실제로 접근성에 유리하다는 주장이 있습니다.

의사 요소 ‘: focus’를 사용하여 사용자가 선택한 입력 만 대상으로 지정할 수도 있습니다.

이 효과는 입력되지 않은 요소에서도 발생할 수 있습니다. 더 일반적인 해결책으로 다음과 같은 작품을 발견했습니다.

:focus {
  outline-color: transparent;
  outline-style: none;
}

업데이트 ::focus 선택기 를 사용하지 않아도됩니다 . 예를 들어 요소 <div id="mydiv">stuff</div>가 있고이 div 요소에서 외부 광선을 얻는 경우 일반처럼 적용하십시오.

#mydiv {
  outline-color: transparent;
  outline-style: none;
}

웹킷 기반 브라우저의 텍스트 영역 크기 조정 :

텍스트 영역에서 최대 높이와 최대 너비를 설정해도 시각적 크기 조정 핸들이 제거되지 않습니다. 시험:

resize: none;

(그렇습니다. “사용자의 기대를 상하게하는 어떠한 일도하지 않기 위해 노력하십시오”에 동의하지만 때로는 웹 응용 프로그램의 맥락에서 의미가 있습니다.

웹킷 양식 요소의 모양과 느낌을 처음부터 사용자 정의하려면 다음을 수행하십시오.

-webkit-appearance: none;

이 효과는 입력되지 않은 요소에서도 발생할 수 있습니다. 더 일반적인 해결책으로 다음과 같은 작품을 발견했습니다.
:focus {
  outline-color: transparent;
  outline-style: none;
}

나는 이것을 설명 할 것이다 :

나는 div클릭 이벤트가있는 클릭 에서 이것을 경험 했으며 20 번의 검색 후 나는이 스 니펫을 발견하여 하루를 절약했다.

-webkit-tap-highlight-color: rgba(0,0,0,0);

이것은 웹킷 모바일 브라우저에서 기본 버튼 강조 표시를 비활성화합니다

접근성에 관심 이 있는 사람들을위한 솔루션입니다 .

outline:none;포커스 아웃 라인을 비활성화하는 데 사용하지 마십시오 . 이 작업을 수행하면 웹의 접근성이 중단됩니다. 이를 수행하기위한 접근 가능한 방법이 있습니다.

액세스 가능한 방식으로 테두리를 제거하는 방법을 설명하기 위해 작성한 이 기사 를 확인하십시오 .

간단히 말해 키보드 사용자를 감지 할 때 윤곽선 테두리 만 표시하는 것입니다. 사용자가 마우스를 사용하기 시작하면 개요가 비활성화됩니다. 결과적으로 두 가지 중 최고를 얻습니다.

부트 스트랩의 버튼에서 글로우를 제거하려면 (필자의 의견으로는 반드시 UX는 아닙니다) 다음 코드가 필요합니다.

.btn:focus, .btn:active:focus, .btn.active:focus{
  outline-color: transparent;
  outline-style: none;
}