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

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

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

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

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

border: x;

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

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

답변

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

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

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

답변

모든 입력에서 제거하려면

input {
 outline:none;
}

답변

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

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

답변

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

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

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

코드 스 니펫 표시

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>

스 니펫 확장

답변

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

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

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

답변

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

*:focus {
outline: none;
}

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

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

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

답변

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

그래서 내가 찾은 가장 좋은 타협은 사용자가 키보드를 사용하여 탐색하고 있음을 감지 할 때만 윤곽선 스타일을 표시하는 것입니다. 기본적으로 사용자가 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/>

스 니펫 확장