텍스트/입력 상자 주변의 포커스 테두리(윤곽선)를 제거하는 방법은 무엇입니까? (크롬) [중복]

질문자 :Joey Morani

이 질문에는 이미 답변이 있습니다 .

입력 텍스트 요소에서 테두리 강조 표시를 제거하는 방법 (19개 답변)

6년 전에 문을 닫았습니다 .

누구든지 텍스트/입력 상자 주위의 주황색 또는 파란색 테두리(윤곽선)를 제거하는 방법을 설명할 수 있습니까? 입력 상자가 활성화되어 있음을 보여주는 것은 Chrome에서만 발생한다고 생각합니다. 다음은 내가 사용하는 입력 CSS입니다.

 input { background-color: transparent; border: 0px solid; height: 20px; width: 160px; color: #CCC; } 

이 테두리는 요소에 초점이 맞춰져 있음을 표시하는 데 사용됩니다(즉, 입력을 입력하거나 Enter로 버튼을 누를 수 있음). 그러나 Outline 속성을 사용하여 제거할 수 있습니다.

 textarea:focus, input:focus{ outline: none; }

사용성을 위해 키보드 포커스가 있는 요소를 사용자가 알 수 있는 다른 방법을 추가할 수 있습니다.

Chrome은 모달로 사용되는 DIV와 같은 다른 요소에도 강조 표시를 적용합니다. 해당 요소와 다른 모든 요소의 강조 표시를 방지하려면 다음을 수행할 수 있습니다.

 *:focus { outline: none; }

---

⚠️ 접근성 경고

입력에서 윤곽선을 제거하는 것은 접근성에 좋지 않은 습관입니다. 스크린 리더를 사용하는 사용자는 포인터가 어디에 초점을 두고 있는지 볼 수 없습니다. 더 많은 정보는 11yproject에서

CEich

현재 답변은 Bootstrap 3.1.1에서 작동하지 않았습니다. 재정의해야 하는 내용은 다음과 같습니다.

 .form-control:focus { border-color: inherit; -webkit-box-shadow: none; box-shadow: none; }

gwintrob

input:focus { outline:none; }

이렇게 하면 됩니다. 주황색 윤곽선은 더 이상 표시되지 않습니다.

azram19

<input style="border:none" >

나를 위해 잘 작동했습니다. html 자체에서 수정하고 싶었습니다 ... :)

Kailas

해결책을 찾았습니다.
나는 사용했다: outline:none; CSS에서 작동하는 것 같습니다. 어쨌든 도움을 주셔서 감사합니다. :)

Joey Morani

이것은 무엇이든 어디에 있든 모든 요소에서 크롬의 주황색 프레임을 제거합니다.

 *:focus { outline: none; }

nonamehere

해결책

 *:focus { outline: 0; }

추신: outline:none 대신 outline:0 사용하세요. 그것은 유효하고 더 나은 관행입니다.

Touhid Rahman

다음 구문을 사용하여 텍스트 상자의 테두리를 제거하고 브라우저 스타일의 강조 표시된 테두리를 제거하십시오.

 input { background-color:transparent; border: 0px solid; height:30px; width:260px; } input:focus { outline:none; }

Tabish

세트

 input:focus{ outline: 0 none; }

"!중요"는 만일의 경우에 대비합니다. 그건 필요하지 않습니다. [지금은 없어졌습니다. -에드.]

madd

다음을 사용할 수도 있다는 것을 알게 되었습니다.

 input:focus{ border: transparent; }

Refilon

이것은 확실히 작동합니다. 주황색 윤곽선이 더 이상 표시되지 않습니다. 모든 태그에 공통:

 *:focus { outline: none; }

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

 input:focus { outline:none; }

Prashant Gupta

출처 : http:www.stackoverflow.com/questions/3397113/how-to-remove-focus-border-outline-around-text-input-boxes-chrome