입력 텍스트 요소에서 테두리 강조 표시를 제거하는 방법

610

HTML 요소가 '초점'(현재 선택 / 탭)되면 많은 브라우저 (적어도 Safari 및 Chrome)는 그 주위에 파란색 테두리를 표시합니다.

내가 작업하고있는 레이아웃의 경우 혼란스럽고 올바르게 보이지 않습니다.

<input type="text" name="user" class="middle" id="user" tabindex="1" />

Firefox는 이것을하지 않는 것 같습니다.

border: x;

누군가 IE의 성능을 말해 줄 수 있다면 궁금 할 것입니다.

Safari에서이 작은 플레어를 제거하도록하는 것이 좋습니다.

— 사용자 170579
소스

1097

귀하의 경우 다음을 시도하십시오.

input.middle:focus {
    outline-width: 0;
}

또는 일반적으로 모든 기본 양식 요소에 영향을 미칩니다.

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

의견에서, 노아 휘트 모어 는 contenteditable속성을 설정 한 요소를 true효과적으로 지원하기 위해 이것을 더 제안 할 것을 제안했다 (효과적으로 입력 요소 유형으로 만든다). CSS3 가능 브라우저에서 다음을 대상으로해야합니다.

[contenteditable="true"]:focus {
    outline: none;
}

비록 그것을 권장하지는 않지만, 완전성을 위해, 당신은 항상 이것 으로 모든 것에 초점 개요를 비활성화 할 수 있습니다 :

*:focus {
    outline: none;
}

포커스 아웃 라인은 접근성 및 유용성 기능입니다. 현재 어떤 요소에 초점을 맞추고 있는지 사용자에게 알려줍니다.

— ᴏ
소스

10

고마워 코리, 좋은 팁. 또한 모든 입력 필드를 다루려면 CSS를 텍스트 영역에 할당해야합니다. input:focus, textarea:focus {outline: none;}

— BaronGrivet

7

선택도 잊지 마세요select:focus {outline:none;}

— Geek Num 88

2

또한 <button>jQuery UI와 Twitter Bootstrap에서 사용되는 태그가 있으므로 button: focus완벽 성을 기하기 위해 목록에 추가 합니다.

— Chris Parton

1

내 경험에 초점을 맞출 필요가 없습니다.이 경우에 적용해야합니다.button, button:focus { outline:none; }

— Mike Lyons

1

@ Cᴏʀʏ a11y와 유용성에 대한 메모를 질문의 맨 위로 옮기시겠습니까? IMO 1111 기능을 제거하는 것은 나쁜 습관이므로 답변을 크게 향상시킬 것입니다.

— Josef Engelfrost

64

모든 입력에서 제거하려면

input {
 outline:none;
}

— 마르크 재
소스

31

이것은 오래된 스레드이지만 참조를 위해 입력 요소의 개요를 비활성화하는 것은 접근성을 방해하므로 권장하지 않습니다.

개요 속성은 사용자에게 키보드 포커스를 명확하게 표시하는 이유가 있습니다. 이 주제에 대한 추가 자료와 추가 자료는 http://outlinenone.com/을 참조하십시오.

— 보아스-복원 모니카
소스

1

Boaz, FYI input.middle {outline : none}을 사용하면 여전히 input (middle 포함) 요소를 탐색 할 수 있습니다. 탭 키를 누르면 입력 태그에도 초점이 맞춰집니다. 유일한 것은 당신이 그것에 초점 (개요 초점)을 볼 수 없다는 것입니다. 따라서 그것을 사용하는 것은 그렇게 유해하지 않습니다 ..

— :)

11

@AnishNair- Only thing is that you won't be able to see the focus(outline focus) on it바로 이것이 내 요점입니다. 윤곽선을 제거하면 실제 이벤트가 아니라 포커스 이벤트 의 시각적 표시 가 비활성화 됩니다. 시각적 표시를 제거한다는 것은 해당 표시에 의존하는 장애인이 더 어려워지고 있음을 의미합니다.

— 보아스-복원 모니카

2

때때로 우리는 무언가를 달성하기 위해 타협해야합니다.)

— Anish Nair

6

@AnishNair True입니다. 그러나이 스레드를 읽는 사람들은 종종 outline:none;암시를 고려하지 않고 쉬운 탈출구를 선호합니다 . 무언가가 쉽고 시간을 절약한다고해서 그것이 모범 사례라는 것은 아닙니다. :)

— Boaz-Monica Monica

5

토론에 늦었지만 여전히 테두리 색상이나 너비 변경과 같이 입력의 초점 상태를 스타일 지정할 수 있습니다. 그렇게 할 때 접근성을 염두에두면 (좋은 대비 등) 기본 윤곽선처럼 액세스 할 수 있습니다.

— Meg

18

이것은 일반적인 관심사입니다.

브라우저가 렌더링 하는 기본 개요 는보기 흉합니다.

예를 들어 이것을보십시오 :

코드 스 니펫 표시

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<form>
  <label>Click to see the input below to see the outline</label>
  <input type="text" placeholder="placeholder text" />
</form>

스 니펫 확장

가장 권장되는 가장 일반적인 "수정"은 outline:none잘못 사용하는 경우 접근성을위한 재난입니다.

어쨌든 개요는 어떤 용도로 사용됩니까?

있어 매우 건조 컷의 웹 사이트 도 모든 것을 설명 내가 찾은이.

Tab 키를 사용하여 웹 문서를 탐색 할 때 "초점"이있는 링크에 대한 시각적 피드백을 제공합니다. 이것은 마우스를 사용할 수 없거나 시각 장애가있는 사람들에게 특히 유용합니다. 개요를 제거하면이 사람들이 사이트에 액세스 할 수 없게됩니다.

자, 위와 같은 예제를 시도해 봅시다. 이제 TAB키를 사용하여 탐색하십시오.

코드 스 니펫 표시

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<form>
  <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
  <input type="text" placeholder="placeholder text" />
</form>

스 니펫 확장

입력을 클릭하지 않고도 초점이 어디에 있는지 어떻게 알 수 있습니까?

이제 outline:none우리의 신뢰를 시험해 보자<input>

다시 한 번, TAB키를 사용하여 텍스트를 클릭 한 후 탐색하고 결과를 확인하십시오.

코드 스 니펫 표시

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none;
}

<form>
  <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
  <input type="text" placeholder="placeholder text" />
</form>

스 니펫 확장

초점이 어디에 있는지 알아내는 것이 더 어려운 방법을 참조하십시오. 유일한 표시는 커서가 깜박입니다. 위의 예는 지나치게 단순합니다. 실제 상황에서는 페이지에 요소가 하나만 없습니다. 이것의 선을 따라 더 많은 것.

코드 스 니펫 표시

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none;
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

스 니펫 확장

이제 윤곽선을 유지하면 동일한 템플릿과 비교하십시오.

코드 스 니펫 표시

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

스 니펫 확장

그래서 우리는 다음을 확립했습니다

개요가 못 생겼다
그것들을 제거하면 인생이 더 어려워집니다.

그래서 대답은 무엇입니까?

못생긴 외곽선을 제거하고 자신의 시각 신호를 추가하여 초점을 나타냅니다.

여기 제가 의미하는 바에 대한 매우 간단한 예가 있습니다.

개요를 제거하고 : focus 및 : active . 또한 : focus 및 : active (개인 환경 설정) 에서 투명으로 설정하여 상단, 왼쪽 및 오른쪽의 기본 테두리를 제거합니다 .

코드 스 니펫 표시

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none
}

input:focus,
input:active {
  border-color: transparent;
  border-bottom: 2px solid red
}

<form>
  <label>Click to see the input below to see the outline</label>
  <input type="text" placeholder="placeholder text" />
</form>

스 니펫 확장

따라서 우리는 이전의 "실제"예제를 사용하여 위의 접근 방식을 시도합니다.

코드 스 니펫 표시

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none
}

input:focus,
input:active {
  border-color: transparent;
  border-bottom: 2px solid red
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

스 니펫 확장

이것은 Materialise 처럼 완전히 제거하는 대신 "개요"를 수정하는 아이디어를 기반으로하는 외부 라이브러리를 사용하여 더 확장 할 수 있습니다.

추악하지 않고 약간의 노력으로 작동하는 것으로 끝날 수 있습니다.

코드 스 니펫 표시

body {
  background: #444
}

.wrapper {
  padding: 2em;
  width: 400px;
  max-width: 100%;
  text-align: center;
  margin: 2em auto;
  border: 1px solid #555
}

button,
.wrapper {
  border-radius: 3px;
}

button {
  padding: .25em 1em;
}

input,
label {
  color: white !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" />

<div class="wrapper">
  <form>
    <input type="text" placeholder="Enter Username" name="uname" required>
    <input type="password" placeholder="Enter Password" name="psw" required>
    <button type="submit">Login</button>
  </form>
</div>

스 니펫 확장

— 나는 코데
소스

18

선이 경계 또는 윤곽선이 아니라 그림자임을 발견 할 때까지 한동안 혼란 스럽습니다. 그래서 그것을 제거하려면 이것을 사용해야했습니다.

input:focus, input.form-control:focus {

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

— 리카르 드 아 스켈 로프
소스

6

CSS를 사용하여 비활성화 할 수 있습니다! 이것은 파란색 테두리를 비활성화하는 데 사용하는 코드입니다.

*:focus {
outline: none;
}

파란색 테두리가 제거됩니다!

이것은 실례입니다 : JSfiddle.net

그것이 도움이되기를 바랍니다!

— 1010
소스

4

모든 포커스 스타일을 제거하는 것은 접근성과 키보드 사용자에게는 일반적으로 좋지 않습니다. 그러나 아웃 라인은보기에 좋지 않으며 모든 대화식 요소마다 맞춤형으로 초점을 맞춘 스타일을 제공하는 것은 큰 고통이 될 수 있습니다.

그래서 내가 찾은 가장 좋은 타협은 사용자가 키보드를 사용하여 탐색하고 있음을 감지 할 때만 윤곽선 스타일을 표시하는 것입니다. 기본적으로 사용자가 Tab 키를 누르면 윤곽선이 표시되고 마우스를 사용하면 숨겨집니다.

일부 요소에 대해 사용자 정의 초점 스타일을 작성하는 것을 막지는 않지만 최소한 좋은 기본값을 제공합니다.

이것이 내가하는 방법입니다.

// detect keyboard users

const keyboardUserCssClass = "keyboardUser";

function setIsKeyboardUser(isKeyboard) {
  const { body } = document;
  if (isKeyboard) {
   body.classList.contains(keyboardUserCssClass) || body.classList.add(keyboardUserCssClass);
  } else {
   body.classList.remove(keyboardUserCssClass);
  }
}

// This is a quick hack to activate focus styles only when the user is
// navigating with TAB key. This is the best compromise we've found to
// keep nice design without sacrifying accessibility.
document.addEventListener("keydown", e => {
  if (e.key === "Tab") {
   setIsKeyboardUser(true);
  }
});
document.addEventListener("click", e => {
  // Pressing ENTER on buttons triggers a click event with coordinates to 0
  setIsKeyboardUser(!e.screenX && !e.screenY);
});

document.addEventListener("mousedown", e => {
  setIsKeyboardUser(false);
});

body:not(.keyboardUser) *:focus {
  outline: none;
}

<p>By default, you'll see no outline. But press TAB key and you'll see focussed element</p>
<button>This is a button</button>
<a href="#">This is anchor link</a>
<input type="checkbox" />
<textarea>textarea</textarea>
<select/>

스 니펫 확장

— 톰 에스테 레즈
소스

이것은 철저한 접근 방식입니다. click청취자는 좋은 터치입니다.

— Keith DC

4

나는 모든 답변을 시도했지만 발견 할 때까지 여전히 모바일 에서 일할 수 없었습니다.-webkit-tap-highlight-color .

그래서 나를 위해 일한 것은 ...

* { -webkit-tap-highlight-color: transparent; }

— 오니
소스

1

그게 내가 찾던 해결책입니다. 이는 li

— Anand G

3

이 코드를 사용하십시오 :

input:focus {
    outline: 0;
}

— 투 히트 라만
소스

3

나와 함께 일한 유일한 해결책

input[type="text"]:focus{
     box-shadow: 0 0 0 rgb(255, 255, 255);
}

 input[type="checkbox"]:focus{
      box-shadow: 0 0 0 rgb(255, 255, 255);
 }

— 알리 알 아민
소스

2

Firefox에서는 어떤 해결책도 나를 위해 작동하지 않았습니다.

다음 솔루션은 Firefox의 포커스에서 테두리 스타일을 변경하고 다른 브라우저에서는 외곽선을 없음으로 설정합니다.

포커스 테두리를 3px 파란색 광선에서 텍스트 영역 테두리와 일치하는 테두리 스타일로 효과적으로 만들었습니다. 다음은 몇 가지 테두리 스타일입니다.

점선 테두리 (테두리 2 픽셀 빨간색 점선) :

국경이 없다! (테두리 0px) :

텍스트 영역 테두리 (테두리 1px 단색 회색) :

코드는 다음과 같습니다.

input:focus, textarea:focus {
    outline: none; /** For Safari, etc **/
    border:1px solid gray; /** For Firefox **/
}

#textarea  {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  width:calc(100% - 20px);
  height:160px;
  display:inline-block;
  margin-top:-0.2em;
}

<textarea id="textarea">yo</textarea>

스 니펫 확장

— 1.21 기가 와트
소스

1

이것도 시도해 볼 수 있습니다

input[type="text"] {
outline-style: none;
}

또는

.classname input{
outline-style: none;
}

— 산토스 칼세
소스

1

다음을 사용하여 텍스트 / 입력 상자 주위의 주황색 또는 파란색 테두리 (개요)를 제거 할 수 있습니다. outline : none

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

— 리조
소스

0

아래 CSS 속성을 사용하여 포커스가 요소에있을 때 윤곽선을 제거하십시오.

input:focus {
    outline: 0;
}

이 CSS 속성은 포커스가있는 모든 입력 필드의 윤곽선을 제거하거나 의사 클래스를 사용하여 CSS 속성 아래를 사용하여 요소의 윤곽선을 제거합니다.

.className input:focus {
    outline: 0;
}

이 속성은 선택한 요소의 윤곽선을 제거합니다.

— 셰일 쉬
소스

0

이 시도

*:focus {
    outline: none;
}

이것은 페이지 전체에 영향을 미칩니다

— Subindas 오후
소스