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

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

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

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

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

데모 : https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/

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

: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;

칼 W :

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

:focus {
  outline-color: transparent;
  outline-style: 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;
}

이 솔루션은 저에게 효과적이었습니다.

input:focus {
    outline: none !important;
    box-shadow: none !important;
}

때로는 버튼이 발생하고 아래를 사용하여 외부를 제거하십시오.

input:hover
input:active, 
input:focus, 
textarea:active,
textarea:hover,
textarea:focus, 
button:focus,
button:active,
button:hover
{
    outline:0px !important;
}

<select class="custom-select">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
</select>

<style>
.custom-select {
        display: inline-block;
        border: 2px solid #bbb;
        padding: 4px 3px 3px 5px;
        margin: 0;
        font: inherit;
        outline:none; /* remove focus ring from Webkit */
        line-height: 1.2;
        background: #f8f8f8;

        -webkit-appearance:none; /* remove the strong OSX influence from Webkit */

        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }
    /* for Webkit's CSS-only solution */
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        .custom-select {
            padding-right:30px;    
        }
    }

    /* Since we removed the default focus styles, we have to add our own */
    .custom-select:focus {
        -webkit-box-shadow: 0 0 3px 1px #c00;
        -moz-box-shadow: 0 0 3px 1px #c00;
        box-shadow: 0 0 3px 1px #c00;
    }

    /* Select arrow styling */
    .custom-select:after {
        content: "▼";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 60%;
        line-height: 30px;
        padding: 0 7px;
        background: #bbb;
        color: white;

        pointer-events:none;

        -webkit-border-radius: 0 6px 6px 0;
        -moz-border-radius: 0 6px 6px 0;
        border-radius: 0 6px 6px 0;
    }
</style>

"슬라이딩 도어"유형의 입력 버튼에서 아웃 라인을 제거하는 것이 도움이되는 것을 알았습니다. 아웃 라인은 슬라이딩 도어 이미지의 오른쪽 "캡"을 덮지 않기 때문에 초점 상태가 약간 불안정 해 보이기 때문입니다.

input.slidingdoorbutton:focus { outline: none;}

텍스트 입력 필드에서이 효과를 제거해야했는데 다른 기술을 제대로 작동시킬 수 없었지만 이것이 저에게 효과적입니다.

input[type="text"], input[type="text"]:focus{
            outline: 0;
            border:none;
            box-shadow:none;

    }

Firefox 및 Chrome에서 테스트되었습니다.

확실한! *를 사용하여 모든 HTML 요소에서 파란색 테두리를 제거 할 수도 있습니다.

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

과

 *{
     outline: none;   
   }