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

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

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

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

마감됨7년 전에.

텍스트/입력 상자 주변의 주황색 또는 파란색 테두리(아웃라인)를 제거하는 방법을 설명할 수 있는 사람이 있습니까?입력 상자가 활성화되어 있다는 것을 보여주는 것은 크롬에서만 일어나는 일이라고 생각합니다.제가 사용하는 입력 CSS는 다음과 같습니다.

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

이 테두리는 요소가 초점을 맞추고 있음을 나타내는 데 사용됩니다(즉, 입력을 입력하거나 Enter로 버튼을 누를 수 있습니다).아웃라인 속성을 사용하여 제거할 수 있지만 다음과 같습니다.

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

사용자가 사용하기 쉽도록 키보드 포커스가 있는 요소를 알 수 있도록 다른 방법을 추가할 수 있습니다.

크롬은 또한 DIV와 같은 모델로 사용되는 다른 요소에도 강조 표시를 적용할 것입니다.이러한 요소와 다른 모든 요소에 대한 강조 표시를 방지하려면 다음 작업을 수행합니다.

*:focus {
    outline: none;
}

---

⚠️ 접근성 경고

입력에서 윤곽선을 제거하는 것은 접근성에 문제가 있다는 것을 참조하십시오.화면 판독기를 사용하는 사용자는 포인터의 초점을 볼 수 없습니다.11y 프로젝트에서 더 많은 정보 제공

부트스트랩 3.1.1에서는 현재 답변이 작동하지 않았습니다.제가 무시해야 했던 것은 다음과 같습니다.

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

input:focus {
    outline:none;
}

이것으로 충분합니다.주황색 윤곽선이 더 이상 나타나지 않습니다.

<input style="border:none" >

저한테는 잘 맞았습니다.html 자체로 고쳤으면 하는 바람...:)

해결책을 찾았습니다.
사용:outline:none;CSS에서, 그리고 그것은 효과가 있었던 것 같습니다.어쨌든 도와주셔서 감사합니다.:)

이것은 그것이 무엇이고 어디에 있든 모든 요소와 모든 요소에서 크롬의 오렌지 프레임을 제거합니다.

*:focus {
    outline: none;
}

해결책

*:focus {
    outline: 0;
}

PS: 사용outline:0대신에outline:none초점을 맞춘그것은 유효하고 더 나은 연습입니다.

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

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

세트

input:focus{
    outline: 0 none;
}

"!important"는 혹시 모르니까요.그럴 필요 없어요.[그리고 이제 그것은 사라졌습니다. -Ed.]

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

*:focus {
    outline: none;
}

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

input:focus {
   outline:none;
}

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

input:focus{
   border: transparent;
}

언급URL : https://stackoverflow.com/questions/3397113/how-to-remove-focus-border-outline-around-text-input-boxes-chrome