इनपुट टेक्स्ट एलिमेंट पर बॉर्डर हाइलाइट कैसे हटाएं

Question

जब एक HTML तत्व 'केंद्रित' (वर्तमान में चयनित / वर्जित है), तो कई ब्राउज़र (कम से कम सफारी और क्रोम) इसके साथ एक नीली सीमा डाल देंगे।

मैं जिस लेआउट पर काम कर रहा हूं, उसके लिए यह विचलित करने वाला है और यह सही नहीं लगता है।

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

फ़ायरफ़ॉक्स ऐसा करने के लिए नहीं लगता है, या कम से कम, मुझे इसके साथ नियंत्रित करने देगा:

border: x;

अगर कोई मुझे बता सकता है कि IE कैसा प्रदर्शन करता है, तो मुझे उत्सुकता होगी।

इस छोटे से भड़क को दूर करने के लिए सफारी प्राप्त करना अच्छा होगा।

Answer 1

आपके मामले में, कोशिश करें:

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

ध्यान रखें कि फ़ोकस आउटलाइन एक एक्सेसिबिलिटी और प्रयोज्य सुविधा है; यह उपयोगकर्ता को इस बात से परिचित कराता है कि वर्तमान में किस तत्व पर ध्यान केंद्रित किया गया है।

Comments

धन्यवाद Cory, महान टिप। आपको सभी इनपुट फ़ील्ड को कवर करने के लिए CSS को textarea को असाइन करना होगा। input:focus, textarea:focus {outline: none;}

— बैरनग्राउट

के रूप में अच्छी तरह से चुन भूल नहीं हैselect:focus {outline:none;}

— Geek संख्या 88

<button>टैग भी है , जो jQuery UI और ट्विटर बूटस्ट्रैप द्वारा उपयोग किया जाता है, अन्य चीजों के बीच, इसलिए मैं button: focusपूर्णता के लिए सूची में जोड़ूंगा।

— क्रिस पार्टन

मेरे अनुभव में, यह बिना फोकस के हो सकता है, जिस स्थिति में मुझे इसे लागू करना थाbutton, button:focus { outline:none; }

— माइक लियोन

@ C @ क्या आप a11y के बारे में नोट को स्थानांतरित करना चाहेंगे और आपके प्रश्न के बहुत ऊपर तक पहुंच जाएंगे? IMO यह आपके जवाब में बहुत सुधार करेगा क्योंकि a11y फीचर्स को हटाना एक बुरा अभ्यास है।

— जोसेफ एन्गेलफ्रॉस्ट

Answer 2

इसे सभी इनपुट्स से हटाने के लिए

input {
 outline:none;
}

Answer 3

यह एक पुराना धागा है, लेकिन संदर्भ के लिए यह ध्यान रखना महत्वपूर्ण है कि इनपुट तत्व की रूपरेखा को अक्षम करना अनुशंसित नहीं है क्योंकि यह एक्सेसिबिलिटी में बाधा उत्पन्न करता है।

रूपरेखा संपत्ति एक कारण के लिए है - उपयोगकर्ताओं को कीबोर्ड फ़ोकस के स्पष्ट संकेत के साथ प्रदान करना। इस विषय के बारे में आगे पढ़ने और अतिरिक्त स्रोतों के लिए http://outlinenone.com/ देखें

Comments

बोअज़, FYI करें input.middle {बाह्यरेखा: कोई भी नहीं) फिर भी आपको तत्वों (input.middle सहित) के माध्यम से पार करने की अनुमति देगा। टैब कुंजी दबाने पर इनपुट टैग पर भी ध्यान दिया जाएगा। केवल एक चीज यह है कि आप उस पर फोकस (रूपरेखा ध्यान) नहीं देख पाएंगे। इसलिए इसका इस्तेमाल करना उतना हानिकारक नहीं है ..

— :)

@AnishNair Only thing is that you won't be able to see the focus(outline focus) on it- और यह बिल्कुल मेरी बात है। रूपरेखा को हटाने से फोकस घटना के दृश्य संकेत को निष्क्रिय कर देता है , वास्तविक घटना को नहीं। दृश्य संकेत को हटाने का मतलब है कि आप विकलांग लोगों के लिए कठिन बना रहे हैं जो उस संकेत पर भरोसा करते हैं।

— बोअज़ - मोनिका

कभी-कभी हमें कुछ हासिल करने के लिए समझौता करने की आवश्यकता होती है

— :)

@AnishNair सच। लेकिन अक्सर इस धागे को पढ़ने वाले लोग outline:none;निहितार्थों पर विचार किए बिना आसान तरीका (यानी ) पसंद करेंगे । सिर्फ इसलिए कि कुछ आसान है और समय बचाता है, इसका मतलब यह नहीं है कि यह सबसे अच्छा अभ्यास है :)

— बोअज़ - मोनिका

मुझे चर्चा में देर हो रही है, लेकिन आप अभी भी इनपुट की केंद्रित स्थिति (जैसे बॉर्डर कलर या चौड़ाई बदलना) को स्टाइल कर सकते हैं। जब तक आप इसे (अच्छे कंट्रास्ट आदि) करते समय पहुंच को ध्यान में रखते हैं, यह डिफ़ॉल्ट रूपरेखा के समान ही सुलभ है।

— मेग

Answer 4

यह एक आम चिंता का विषय है।

ब्राउज़र द्वारा प्रस्तुत डिफ़ॉल्ट रूपरेखा बदसूरत है।

उदाहरण के लिए इसे देखें:

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>

इसलिए हमने निम्नलिखित की स्थापना की है

1. रूपरेखा बदसूरत है
2. उन्हें हटाना जीवन को और कठिन बना देता है।

---

तो जवाब क्या है?

बदसूरत रूपरेखा निकालें और ध्यान केंद्रित करने के लिए अपने स्वयं के दृश्य संकेतों को जोड़ें।

यहाँ एक बहुत सरल उदाहरण है कि मेरा क्या मतलब है।

मैं रूपरेखा निकालता हूं और नीचे की सीमा जोड़ता हूं : फोकस और : सक्रिय । मैं पारदर्शी, फोकस और : सक्रिय (व्यक्तिगत प्राथमिकता) पर उन्हें सेट करके शीर्ष, बाईं और दाईं ओर की डिफ़ॉल्ट सीमाओं को भी हटा देता हूं

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>

बाहरी पुस्तकालयों का उपयोग करके इसे आगे बढ़ाया जा सकता है जो "रूपरेखा" को संशोधित करने के विचार पर निर्माण करते हैं क्योंकि इसे पूरी तरह से भौतिक रूप से हटाने के विपरीत है

आप किसी ऐसी चीज़ के साथ समाप्त हो सकते हैं जो बदसूरत नहीं है और बहुत कम प्रयास के साथ काम करती है

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>

Answer 5

यह कुछ समय के लिए मुझे भ्रमित कर रहा था जब तक मुझे पता चला कि रेखा न तो एक सीमा थी या एक रूपरेखा थी, यह एक छाया थी। इसलिए इसे हटाने के लिए मुझे इसका उपयोग करना पड़ा:

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

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

Answer 6

आप इसे निष्क्रिय करने के लिए CSS का उपयोग कर सकते हैं! यह वह कोड है जिसका उपयोग मैं ब्लू बॉर्डर को अक्षम करने के लिए करता हूं:

*:focus {
outline: none;
}

यह नीली सीमा को हटा देगा!

यह एक कार्यशील उदाहरण है: JSfiddle.net

आशा है ये मदद करेगा!

Answer 7

सभी फ़ोकस शैलियों को हटाना सामान्य रूप से पहुंच और कीबोर्ड उपयोगकर्ताओं के लिए खराब है। लेकिन रूपरेखा बदसूरत है और हर एक इंटरैक्टिव तत्व के लिए एक कस्टम फोकस्ड शैली प्रदान करना एक वास्तविक दर्द हो सकता है।

इसलिए मैंने जो सबसे अच्छा समझौता किया है वह रूपरेखा शैलियों को दिखाने के लिए है जब हम यह पता लगाते हैं कि उपयोगकर्ता कुंजीपटल का उपयोग कर रहा है नेविगेट करने के लिए। मूल रूप से, यदि उपयोगकर्ता 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/>

Comments

यह एक संपूर्ण दृष्टिकोण है। clickश्रोता एक अच्छा स्पर्श है।

— कीथ डीसी

Answer 8

मैंने सभी उत्तरों की कोशिश की और मैं तब भी मोबाइल पर काम करने के लिए नहीं मिला , जब तक कि मैं नहीं मिला -webkit-tap-highlight-color।

तो, मेरे लिए क्या काम किया है ...

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

Comments

मैं जिस उपाय को खोज रहा था, वह था। यह विशेष रूप से उपयोगी है जब आप ली जैसे तत्वों के साथ टचस्क्रीन अनुभव हैं

— आनंद जी

Answer 9

इस कोड का उपयोग करें:

input:focus {
    outline: 0;
}

Answer 10

एकमात्र विलेयोन जो मेरे साथ काम करता था

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

Answer 11

किसी भी समाधान ने मेरे लिए फ़ायरफ़ॉक्स में काम नहीं किया।

निम्नलिखित समाधान फ़ायरफ़ॉक्स के लिए फ़ोकस पर सीमा शैली को बदलता है और अन्य ब्राउज़रों के लिए कोई भी रूपरेखा निर्धारित नहीं करता है।

मैंने प्रभावी रूप से फोकस बॉर्डर को 3px नीली चमक से बॉर्डर स्टाइल में बनाया है जो टेक्स्ट एरिया बॉर्डर से मेल खाता है। यहाँ कुछ बॉर्डर स्टाइल हैं:

डैश बॉर्डर (बॉर्डर 2 पीएक्स धराशायी):

कोई सीमा नहीं! (सीमा 0px):

टेक्सारिया बॉर्डर (बॉर्डर 1 पीएक्स सॉलिड ग्रे):

यहाँ कोड है:

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>

Answer 12

आप यह भी कोशिश कर सकते हैं

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

या

.classname input{
outline-style: none;
}

Answer 13

आप टेक्स्ट / इनपुट बॉक् स के आस-पास ऑरेंज या ब्लू बॉर्डर (आउटलाइन) को हटा सकते हैं: आउटलाइन: कोई नहीं

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

Answer 14

जब सीएसएस संपत्ति का उपयोग करके, तत्व पर ध्यान केंद्रित किया जाता है, तो रूपरेखा निकालें:

input:focus {
    outline: 0;
}

यह सीएसएस संपत्ति फोकस पर सभी इनपुट क्षेत्रों के लिए रूपरेखा को हटा देती है या सीएसएस संपत्ति का उपयोग करके तत्व की रूपरेखा को हटाने के लिए छद्म वर्ग का उपयोग करती है।

.className input:focus {
    outline: 0;
} 

यह गुण चयनित तत्व के लिए रूपरेखा को निकालता है।

Answer 15

इसे इस्तेमाल करे

*:focus {
    outline: none;
}

यह आपके पूरे पृष्ठों में प्रभावी होगा