iphone input css shadow




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

이것은 공통 관심사입니다.

브라우저가 렌더링하는 기본 outline 은 추악합니다.

다음을 참조하십시오.

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 봅시다 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>

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

  1. 윤곽선이 추악하다.
  2. 그것들을 제거하면 삶이 더 어려워집니다.

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

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

제가 의미하는 바는 아주 간단한 예입니다.

외곽선을 제거하고 아래쪽 테두리를 :focus:active 에 추가합니다. 또한 :focus 를 투명하게 설정하여 위쪽, 왼쪽 및 오른쪽의 기본 테두리를 제거합니다 :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>

Materialize 와 같이 완전히 제거하는 대신 "개요"를 수정하는 아이디어를 기반으로하는 외부 라이브러리를 사용하면 더 많은 것을 확장 할 수 있습니다

못 생기고 거의 노력하지 않아도되는 무언가로 끝낼 수 있습니다.

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>

html 요소가 '집중'되면 (현재 선택 / 탭으로) 많은 브라우저 (Safari 및 Chrome 이상)는 파란색 테두리로 표시됩니다.

내가 작업하고있는 레이아웃에서 이것은 혼란스럽고 올바르게 보이지 않습니다.

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

파이어 폭스는 이것을하지 않는 것 같아요. 적어도

border: x;

누군가가 IE의 성능을 말해 줄 수 있다면, 나는 호기심이 생길 것이다.

그러나 사파리가 약간의 플레어를 제거하는 것이 좋을 것입니다.


CSS를 사용하지 않도록 설정할 수 있습니다! 파란색 테두리를 사용하지 않도록 설정하는 데 사용하는 코드는 다음과 같습니다.

*:focus {
outline: none;
}

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

이것은 실제 예입니다 : JSfiddle.net

희망이 도움이됩니다!


나는 모든 해답을 시험해 보았고, 나는 웹에서 -webkit-tap-highlight-color 찾을 때까지 여전히 모바일 에서 일할 수 없었다.

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

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

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

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

모든 입력에서 제거하려면

input {
 outline:none;
}

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

input:focus {
    outline: 0;
}

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

.className input:focus {
    outline: 0;
} 

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


이것도 시도해보십시오.

.form-group input {

  display: block;
  background: none;
  padding: 0.175rem 0.175rem 0.0875rem;
  font-size: 1.4rem;
  border-width: 0;
  border-color: transparent;
  line-height: 1.9;
  width: 100%;
  color: #ccc;
  transition: all 0.28s ease;
  box-shadow: none;

}

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

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


접근성 및 키보드 사용자에게 일반적으로 모든 포커스 스타일을 제거하는 것은 좋지 않습니다. 그러나 윤곽선은보기 흉하고 각 대화식 요소마다 맞춤식 초점 맞춤 스타일을 제공하는 것이 큰 어려움이 될 수 있습니다.

따라서 내가 찾은 최고의 절충점은 사용자가 키보드를 사용하여 탐색하는 경우에만 윤곽선 스타일을 표시하는 것입니다. 기본적으로 사용자가 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/>


파이어 폭스에서 나에게 아무런 해결책도 없었다.

다음 해결책은 Firefox에서 포커스가있는 테두리 스타일을 변경하고 다른 브라우저에서는 윤곽선을 없음으로 설정합니다.

필자는 초점 경계선을 3px 파란 광선에서 텍스트 영역 테두리와 일치하는 테두리 스타일로 변경했습니다. 다음은 몇 가지 테두리 스타일입니다.

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

국경이 없다! (border 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>





border