Safari/Chrome 텍스트 입력/텍스트 영역 야광 제거

Safari/Chrome 텍스트 입력/텍스트 영역 야광 제거

CSS를 이용하여 문자 입력/문자 영역을 클릭하면 기본 파란색과 노란색 빛을 제거할 수 있는지 궁금합니다.

편집(11년 후):활성 요소를 나타내는 폴백을 제공하지 않는 한 이 작업을 수행하지 마십시오.그렇지 않으면 문서의 어떤 요소에 초점이 있는지를 보여주는 표시가 근본적으로 제거되므로 접근성이 저하됩니다.키보드 사용자가 되어 어떤 요소와 상호 작용할 수 있는지 제대로 알지 못한다고 상상해 보세요.여기서 접근성이 심미성을 능가하도록 합시다.

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>, 당신은 이 디브 요소에 외부 광을 내고 있었습니다. 그냥 일반적인 것처럼 발라주세요.

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

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

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

resize: none;

(그리고 예, "사용자의 기대를 깨는 일은 피하려고 한다"는 것에는 동의하지만, 때때로 웹 애플리케이션의 상황에서는 말이 되기도 합니다.

웹킷 양식 요소의 모양과 느낌을 처음부터 사용자 지정하려면:

-webkit-appearance: none;

저는 이것을 a에서 경험했습니다.div클릭 이벤트가 있었고 20번의 검색 끝에 이 토막글을 발견했습니다.

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

이렇게 하면 웹킷 모바일 브라우저에서 기본 버튼 강조 표시가 비활성화됩니다.

칼 W:

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

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

제가 설명해 드리겠습니다.

• :focus초점이 맞는 요소를 스타일링한다는 뜻입니다.그래서 우리는 초점을 맞춘 요소들을 스타일링하고 있습니다.
• outline-color: transparent;파란 빛이 투명하다는 뜻입니다.
• outline-style: none;같은 일을 합니다.

이것이 접근성에 신경 쓰는 사람들을 위한 해결책입니다.

제발, 사용하지 마.outline:none;포커스 아웃라인을 비활성화할 수 있습니다.이렇게 하면 웹의 접근성이 떨어지게 됩니다.접근 가능한 방법이 있습니다.

제가 작성한 이 기사를 확인하여 접근 가능한 방법으로 국경을 제거하는 방법을 설명합니다.

간단히 말하면 키보드 사용자를 감지할 때만 윤곽선 테두리를 표시하는 것입니다.사용자가 마우스를 사용하기 시작하면 윤곽선을 비활성화합니다.결과적으로 두 가지 중에서 가장 좋은 것을 얻게 됩니다.

부트스트랩의 버튼에서 야광을 제거하려면 다음 코드가 필요합니다.

.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;   
   }

언급URL : https://stackoverflow.com/questions/935559/remove-safari-chrome-textinput-textarea-glow