Cách xóa phần tô sáng trên phần tử văn bản đầu vào

Khi một phần tử HTML được 'tập trung' (hiện được chọn / được gắn thẻ), nhiều trình duyệt (ít nhất là Safari và Chrome) sẽ đặt một đường viền màu xanh xung quanh nó.

Đối với bố cục tôi đang làm việc, điều này gây mất tập trung và có vẻ không đúng.

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

Firefox dường như không làm điều này, hoặc ít nhất, sẽ cho phép tôi kiểm soát nó bằng:

border: x;

Nếu ai đó có thể cho tôi biết IE hoạt động như thế nào, tôi sẽ tò mò.

Bắt Safari để loại bỏ một chút ngọn lửa này sẽ rất tuyệt.

Trong trường hợp của bạn, hãy thử:

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

Hoặc nói chung, để ảnh hưởng đến tất cả các yếu tố hình thức cơ bản:

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

Trong các bình luận, Noah Whitmore đề nghị đưa điều này hơn nữa để hỗ trợ các yếu tố có contenteditablethuộc tính được đặt thành true(thực sự biến chúng thành một loại yếu tố đầu vào). Sau đây cũng nên nhắm mục tiêu những mục tiêu đó (trong các trình duyệt có khả năng CSS3):

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

Mặc dù tôi không khuyến nghị điều đó, vì mục đích hoàn chỉnh, bạn luôn có thể vô hiệu hóa phác thảo tiêu điểm trên mọi thứ với điều này:

*:focus {
    outline: none;
}

Hãy nhớ rằng phác thảo tập trung là một tính năng tiếp cận và khả năng sử dụng; nó gợi ý người dùng về yếu tố nào hiện đang được chú trọng.

Để loại bỏ nó khỏi tất cả các đầu vào

input {
 outline:none;
}

Đây là một chủ đề cũ, nhưng để tham khảo, điều quan trọng cần lưu ý là việc vô hiệu hóa phác thảo của phần tử đầu vào không được khuyến khích vì nó cản trở khả năng truy cập.

Thuộc tính phác thảo là có lý do - cung cấp cho người dùng một dấu hiệu rõ ràng về trọng tâm bàn phím. Để đọc thêm và các nguồn bổ sung về chủ đề này, hãy xem http://outlinenone.com/

Đây là một mối quan tâm chung.

Các phác thảo mặc định mà trình duyệt hiển thị là xấu xí.

Xem ví dụ này:

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>

"Cách khắc phục" phổ biến nhất mà hầu hết khuyến nghị là outline:none- nếu sử dụng không đúng cách - là thảm họa cho khả năng truy cập.

Vì vậy, ... những gì sử dụng là phác thảo?

Có một trang web rất khô mà tôi tìm thấy giải thích mọi thứ tốt.

Nó cung cấp phản hồi trực quan cho các liên kết có "tiêu điểm" khi điều hướng tài liệu web bằng phím TAB (hoặc tương đương). Điều này đặc biệt hữu ích cho những người không thể sử dụng chuột hoặc khiếm thị. Nếu bạn xóa phác thảo bạn đang làm cho trang web của bạn không thể truy cập được cho những người này.

Ok, chúng ta hãy thử ví dụ như trên, bây giờ sử dụng TABphím để điều hướng.

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>

Lưu ý làm thế nào bạn có thể biết nơi tập trung ngay cả khi không nhấp vào đầu vào?

Bây giờ, hãy thử outline:nonetin tưởng của chúng tôi<input>

Vì vậy, một lần nữa, sử dụng TABphím để điều hướng sau khi nhấp vào văn bản và xem điều gì xảy ra.

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>

Xem làm thế nào khó khăn hơn để tìm ra nơi tập trung là gì? Dấu hiệu duy nhất là con trỏ nhấp nháy. Ví dụ của tôi ở trên là quá đơn giản. Trong các tình huống thực tế, bạn sẽ không chỉ có một yếu tố trên trang. Một cái gì đó nhiều hơn dọc theo dòng này.

.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>

Bây giờ so sánh nó với cùng một mẫu nếu chúng ta giữ nguyên phác thảo:

.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>

Vì vậy, chúng tôi đã thiết lập như sau

1. Đề cương là xấu
2. Loại bỏ chúng làm cho cuộc sống khó khăn hơn.

Vậy câu trả lời là gì?

Loại bỏ các phác thảo xấu xí và thêm tín hiệu hình ảnh của riêng bạn để chỉ trọng tâm.

Đây là một ví dụ rất đơn giản về những gì tôi muốn nói.

Tôi xóa phác thảo và thêm đường viền dưới vào : tập trung và : kích hoạt . Tôi cũng xóa các đường viền mặc định ở phía trên, bên trái và bên phải bằng cách đặt chúng ở dạng trong suốt : tập trung và : hoạt động (tùy chọn cá nhân)

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>

Vì vậy, chúng tôi cố gắng tiếp cận trên với ví dụ "thực tế" của chúng tôi từ trước đó:

.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>

Điều này có thể được mở rộng hơn nữa bằng cách sử dụng các thư viện bên ngoài dựa trên ý tưởng sửa đổi "phác thảo" thay vì loại bỏ nó hoàn toàn như Materialize

Bạn có thể kết thúc với một cái gì đó không xấu và làm việc với rất ít nỗ lực

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>

Điều này đã gây nhầm lẫn cho tôi một thời gian cho đến khi tôi phát hiện ra đường kẻ không phải là đường viền hay đường viền, nó là một cái bóng. Vì vậy, để loại bỏ nó, tôi đã phải sử dụng nó:

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

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

Bạn có thể sử dụng CSS để vô hiệu hóa điều đó! Đây là mã tôi sử dụng để vô hiệu hóa đường viền màu xanh:

*:focus {
outline: none;
}

Điều này sẽ loại bỏ các đường viền màu xanh!

Đây là một ví dụ hoạt động: JSfiddle.net

Hy vọng nó giúp!

Loại bỏ tất cả các kiểu lấy nét là không tốt cho khả năng truy cập và người dùng bàn phím nói chung. Nhưng phác thảo là xấu xí và cung cấp một phong cách tập trung tùy chỉnh cho mọi phần tử tương tác duy nhất có thể là một nỗi đau thực sự.

Vì vậy, sự thỏa hiệp tốt nhất mà tôi tìm thấy là chỉ hiển thị các kiểu phác thảo khi chúng tôi phát hiện ra rằng người dùng đang sử dụng bàn phím để điều hướng. Về cơ bản, nếu người dùng nhấn TAB, chúng tôi trình bày đề cương và nếu ông sử dụng chuột, chúng tôi ẩn chúng.

Nó không ngăn bạn viết các kiểu lấy nét tùy chỉnh cho một số yếu tố nhưng ít nhất nó cung cấp một mặc định tốt.

Đây là cách tôi làm điều đó:

// 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/>

Tôi đã thử tất cả các câu trả lời và tôi vẫn không thể bắt tôi làm việc trên Mobile cho đến khi tôi tìm thấy -webkit-tap-highlight-color.

Vì vậy, những gì làm việc cho tôi là ...

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

Solutiion duy nhất làm việc với tôi

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

Sử dụng mã này:

input:focus {
    outline: 0;
}

Không ai trong số các giải pháp làm việc cho tôi trong Firefox.

Giải pháp sau đây thay đổi kiểu viền trên tiêu điểm cho Firefox và đặt phác thảo thành không có cho các trình duyệt khác.

Tôi đã thực sự làm cho đường viền tiêu điểm chuyển từ màu xanh lam 3px sang kiểu viền phù hợp với đường viền vùng văn bản. Dưới đây là một số kiểu viền:

Đường viền nét đứt (viền 2px nét đỏ):

Không biên giới! (viền 0px):

Đường viền Textarea (viền màu xám 1px):

Đây là mã:

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>

Bạn cũng có thể thử điều này

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

hoặc là

.classname input{
outline-style: none;
}

Bạn có thể xóa đường viền màu cam hoặc màu xanh lam (phác thảo) xung quanh hộp văn bản / đầu vào bằng cách sử dụng: phác thảo: không

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

Hủy bỏ các phác thảo khi tập trung vào yếu tố, sử dụng bên dưới thuộc tính CSS:

input:focus {
    outline: 0;
}

Thuộc tính CSS này loại bỏ phác thảo cho tất cả các trường đầu vào tập trung hoặc sử dụng lớp giả để xóa phác thảo của phần tử bằng cách sử dụng thuộc tính CSS bên dưới.

.className input:focus {
    outline: 0;
} 

Thuộc tính này loại bỏ các phác thảo cho các yếu tố được chọn.

Thử cái này

*:focus {
    outline: none;
}

Điều này sẽ có hiệu lực trên khắp các trang của bạn