วิธีการลบไฮไลท์ชายแดนในองค์ประกอบข้อความที่ป้อนเข้า

610

เมื่อองค์ประกอบ HTML เน้น '(เลือก / แท็บปัจจุบัน) เบราว์เซอร์จำนวนมาก (อย่างน้อย Safari และ Chrome) จะใส่เส้นขอบสีน้ำเงินรอบ ๆ

สำหรับเลย์เอาต์ที่ฉันกำลังทำอยู่นี่เป็นสิ่งที่ทำให้เสียสมาธิและดูไม่ถูกต้อง

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

Firefox ดูเหมือนจะไม่ทำเช่นนี้หรืออย่างน้อยจะให้ฉันควบคุมด้วย:

border: x;

ถ้ามีคนบอกฉันได้ว่าประสิทธิภาพของ IE ฉันจะอยากรู้อยากเห็น

การได้รับ Safari เพื่อลบแสงน้อยนี้จะดี

— user170579
แหล่งที่มา

1099

ในกรณีของคุณลอง:

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

โปรดทราบว่าโครงร่างโฟกัสเป็นคุณลักษณะการเข้าถึงและการใช้งาน มันบ่งบอกผู้ใช้ว่าองค์ประกอบใดที่เน้นอยู่ในปัจจุบัน

— Cᴏʀʏ
แหล่งที่มา

10

ขอบคุณคอรีเคล็ดลับที่ดี คุณต้องกำหนด CSS ให้กับ textarea เพื่อให้ครอบคลุมทุกฟิลด์อินพุต 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 มันจะปรับปรุงคำตอบของคุณอย่างมากตั้งแต่การลบคุณลักษณะ a11y เป็นการปฏิบัติที่ไม่ดี

— Josef Engelfrost

64

หากต้องการลบออกจากอินพุตทั้งหมด

input {
 outline:none;
}

— marcjae
แหล่งที่มา

31

นี่เป็นเธรดเก่า แต่สำหรับการอ้างอิงสิ่งสำคัญที่ควรทราบคือไม่แนะนำให้ปิดการใช้งานเค้าร่างขององค์ประกอบอินพุตเนื่องจากจะเป็นอุปสรรคต่อการเข้าถึง

คุณสมบัติโครงร่างมีเหตุผล - จัดเตรียมผู้ใช้ด้วยการบ่งชี้ที่ชัดเจนของคีย์บอร์ดโฟกัส สำหรับการอ่านเพิ่มเติมและแหล่งข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ดูhttp://outlinenone.com/

— Boaz - Reinstate Monica
แหล่งที่มา

1

Boaz, FY.m 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- และนั่นคือจุดของฉัน การลบเค้าร่างจะปิดใช้งานการบ่งชี้ด้วยภาพของเหตุการณ์โฟกัสไม่ใช่เหตุการณ์จริง การลบการบ่งชี้ด้วยสายตาหมายความว่าคุณทำให้คนพิการที่พึ่งพาตัวบ่งชี้นั้นยากขึ้น

— Boaz - Reinstate Monica

2

บางครั้งเราจำเป็นต้องประนีประนอมเพื่อที่จะได้สิ่ง

— :)

6

@AnishNair True แต่บ่อยครั้งที่ผู้ที่อ่านหัวข้อนี้ต้องการทางออกที่ง่าย (เช่นoutline:none;) โดยไม่คำนึงถึงความหมาย เพียงเพราะบางสิ่งง่ายและประหยัดเวลาไม่ได้หมายความว่าเป็นแนวปฏิบัติที่ดีที่สุด :)

— Boaz - Reinstate 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>

ขยายตัวอย่างข้อมูล

ดังนั้นเราจึงได้จัดตั้งขึ้นดังต่อไปนี้

เค้าร่างน่าเกลียด
การลบออกทำให้ชีวิตยากขึ้น

ดังนั้นคำตอบคืออะไร

ลบโครงร่างที่น่าเกลียดและเพิ่มตัวชี้นำภาพของคุณเองเพื่อระบุโฟกัส

นี่คือตัวอย่างง่ายๆของสิ่งที่ฉันหมายถึง

ฉันจะลบร่างและเพิ่มขอบด้านล่าง: โฟกัสและ: การใช้งาน ฉันยังลบเส้นขอบเริ่มต้นที่ด้านบนซ้ายและขวาด้วยการตั้งค่าให้โปร่งใสใน: โฟกัสและ: ใช้งาน (การตั้งค่าส่วนตัว)

แสดงตัวอย่างโค้ด

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>

ขยายตัวอย่างข้อมูล

— ฉันเป็นรหัส
แหล่งที่มา

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

— Rikard Askelöf
แหล่งที่มา

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

ขยายตัวอย่างข้อมูล

— Tom Esterez
แหล่งที่มา

นี่เป็นวิธีการอย่างละเอียด clickฟังเป็นสัมผัสที่ดี

— Keith DC

4

ฉันพยายามทุกคำตอบและฉันยังคงไม่สามารถรับของเราที่จะทำงานในมือถือ-webkit-tap-highlight-colorจนกว่าเราจะพบว่า

ดังนั้นสิ่งที่ใช้ได้ผลสำหรับฉันคือ ...

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

— Oneezy
แหล่งที่มา

1

นั่นเป็นทางออกที่ฉันกำลังค้นหา สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อคุณสัมผัสกับหน้าจอสัมผัสด้วยองค์ประกอบต่างๆเช่น li

— Anand G

3

ใช้รหัสนี้:

input:focus {
    outline: 0;
}

— Touhid Rahman
แหล่งที่มา

3

solutiion เดียวที่ทำงานกับฉัน

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 เป็นสไตล์เส้นขอบที่ตรงกับเส้นขอบพื้นที่ข้อความ นี่คือลักษณะเส้นขอบบางส่วน:

ขอบประ (เส้นขอบ 2px แดงประ):

ไม่มีพรมแดน! (เส้นขอบ 0px):

ขอบ Textarea (เส้นขอบ 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;
}

— Santosh Khalse
แหล่งที่มา

1

คุณสามารถลบเส้นขอบสีส้มหรือน้ำเงิน (เค้าร่าง) รอบ ๆ กล่องข้อความ / อินพุตโดยใช้: outline: none

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

— Rizo
แหล่งที่มา

0

ลบโครงร่างเมื่อโฟกัสอยู่ที่องค์ประกอบโดยใช้คุณสมบัติ CSS ด้านล่าง:

input:focus {
    outline: 0;
}

คุณสมบัติ CSS นี้จะลบโครงร่างสำหรับฟิลด์อินพุตทั้งหมดบนโฟกัสหรือใช้คลาสหลอกเพื่อลบโครงร่างขององค์ประกอบโดยใช้คุณสมบัติ CSS ด้านล่าง

.className input:focus {
    outline: 0;
}

คุณสมบัตินี้จะลบโครงร่างสำหรับองค์ประกอบที่เลือก

— Shailesh
แหล่งที่มา

0

ลองสิ่งนี้

*:focus {
    outline: none;
}

สิ่งนี้จะมีผลทั่วทั้งหน้าของคุณ

— subindas pm
แหล่งที่มา