इनपुट बटन से आउटलाइन बॉर्डर कैसे निकालें

Question

जब कहीं और क्लिक करें तो सीमा गायब हो जाती है, ऑनफोकस को किसी ने भी आज़माया नहीं, लेकिन मदद नहीं की, क्लिक करने पर बदसूरत बटन बॉर्डर गायब कैसे करें?

input[type="button"] {
  width: 120px;
  height: 60px;
  margin-left: 35px;
  display: block;
  background-color: gray;
  color: white;
  border: none;
}

<input type="button" value="Example Button">

Comments

मेरे मोज़िला ब्राउज़र पर ठीक लग रहा है

— Drixson Oseña

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

— जुक्का के। कोर्पेला

एक अच्छा पढ़ा a11yproject.com/posts/never-remove-css-outlines

— तैमूर खान

Answer 1

रूपरेखा का उपयोग करना : कोई नहीं; हम उस सीमा को क्रोम में हटा सकते हैं

<style>
input[type="button"]
{
    width:120px;
    height:60px;
    margin-left:35px;
    display:block;
    background-color:gray;
    color:white;
    border: none;
    outline:none;
}
</style>

Comments

क्रोम पर, मुझे इसके बजाय outline: none;नियम जोड़ना था । input[type="button"]:focusinput[type="button"]

— गाया

@ शुंगचो: धन्यवाद। आपके तरीके ने मेरी मदद की।

— priyamtheone

Answer 2

Chrome और FF में ध्यान केंद्रित करें

हटा दिया:

input[type="button"]{
   outline:none;
}
input[type="button"]::-moz-focus-inner {
   border: 0;
}

डेमो

अभिगम्यता (A11Y)

/* Don't forget! User accessibility is important */
input[type="button"]:focus {
  /* your custom focused styles here */
}

Answer 3

यह मेरे लिए बस काम करता है :)

*:focus {
    outline: 0 !important;
}

Comments

यह एकमात्र उत्तर है जिसने मेरे लिए काम किया है, लेकिन आप इसे बिना कैसे करेंगे? मैंने बहुत सारे स्रोतों से सुना है कि आपको केवल इसका उपयोग करना चाहिए अगर बिल्कुल आवश्यक हो।

— जय

मैंने बाहरी सीएसएस में पूरे आवेदन के लिए इस बटन को स्टाइल किया। यदि आप इसे अनदेखा करना चाहते हैं, तो आप इसे प्रत्येक बटन में उपयोग करके css में # सहायता के साथ कर सकते हैं: # बटन-tyle {रूपरेखा: 0; } या प्रत्येक बटन में #id के बिना सभी बटन के लिए एक ही शैली का उपयोग करें, यहां एक डेमो लिंक है : इनपुट [प्रकार = "बटन"] {चौड़ाई: 70px; ऊँचाई: 30px; margin-left: 72px; मार्जिन टॉप: 15px; प्रदर्शन क्षेत्र; पृष्ठभूमि का रंग: ग्रे; सफ़ेद रंग; सीमा: कोई नहीं; रूपरेखा: 0; }

— एक्स-कोडर

Answer 4

यह एक मेरे लिए काम किया

button:focus {
    border: none;
    outline: none;
}

Answer 5

outlineसंपत्ति तुम क्या जरूरत है। यह एक घोषणा में निम्नलिखित गुणों में से प्रत्येक को सेट करने के लिए आशुलिपि है:

• outline-style
• outline-width
• outline-color

आप उपयोग कर सकते हैं outline: none;, जो स्वीकृत उत्तर में सुझाया गया है। यदि आप चाहते थे तो आप और भी विशिष्ट हो सकते हैं:

button {
    outline-style: none;
}

Answer 6

button:focus{outline:none !important;}

!importantअगर यह बूटस्ट्रैप में प्रयोग किया जाता है जोड़ें

Comments

मुझे लगता है कि पूछने वाले ने पहले से ही यह कोशिश की, आखिरकार, सवाल कहता है tried onfocus none, but didn't help।

— ट्रांसजेंसी के लिए जे जे और

Answer 7

जब आप आउटलाइन प्रॉपर्टी को फ़ोकस पर बदलते हैं, तो होने वाली समस्या से बचने के लिए, इनपुट बटन पर उपयोगकर्ता टैब या उस पर क्लिक करने पर कोई दृश्य प्रभाव नहीं होगा।

इस मामले में एक सबमिट प्रकार है, लेकिन आप एक टाइप = "बटन" पर भी आवेदन कर सकते हैं।

input[type="submit"]:focus {
    outline: none !important;
    background-color: rgb(208, 192, 74);
}

Answer 8

बटन के दोनों outlineऔर box-shadowगुण सेट करें noneऔर उन्हें महत्वपूर्ण बनाएं ।

input[type="button"] {
    outline: none !important;
    box-shadow: none !important;
} 

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

Answer 9

यह आपके विचार से बहुत सरल है। जब बटन को फोकस किया जाता है, तो outlineसंपत्ति को इस तरह लागू करें:

button:focus {
    outline: 0 !important;
}

लेकिन जब मैं noneमूल्य का उपयोग करता हूं , तो यह मेरे लिए काम नहीं करता है।

Answer 10

मानक वेब विकास तक एक अच्छा विचार नहीं है। किसी भी तरह से अगर आप समाधान की तलाश कर रहे हैं तो सिर्फ समस्या को हल नहीं करता है। आपको नीले रंग की छाया भी निकालनी होगी। विशिष्ट परिदृश्यों के लिए इस विशेष शैली को आपके बटन से अलग करने के लिए एक अलग वर्ग नाम का उपयोग करें।

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

बेहतर है यह करो

.remove-border.focus, .remove-border:focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
 }

Answer 11

रूपरेखा निकालना एक सुगमता दुःस्वप्न है। कीबोर्ड का उपयोग करने वाले लोग कभी नहीं जान पाएंगे कि वे किस आइटम पर हैं।

इसे छोड़ने के लिए सबसे अच्छा है, क्योंकि अधिकांश क्लिक किए गए बटन आपको कहीं भी ले जाएंगे, या यदि आप रूपरेखा को निकालना चाहते हैं, तो इसे विशिष्ट वर्ग नाम से अलग करें।

.no-outline {
  outline: none;
}

फिर आप जब चाहें उस क्लास को लगा सकते हैं।

Answer 12

नीचे दिए गए HTML में:

<button class="btn-without-border"> Submit </button>

सीएसएस शैली में निम्नलिखित कार्य करें:

.btn-without-border:focus {
    border: none;
    outline: none;
}

यह कोड बटन बॉर्डर को हटा देगा और बटन क्लिक होने पर बटन बॉर्डर फोकस को डिसेबल कर देगा।

Answer 13

जैसा कि कई अन्य लोगों ने उल्लेख किया है, selector:focus {outline: none;}उस सीमा को हटा देगा , लेकिन वह सीमा एक महत्वपूर्ण पहुंच सुविधा है जो कीबोर्ड उपयोगकर्ताओं को बटन खोजने की अनुमति देती है और इसे हटाया नहीं जाना चाहिए ।

चूंकि आपकी चिंता एक सौंदर्यवादी प्रतीत होती है, इसलिए आपको पता होना चाहिए कि आप रूपरेखा के रंग, शैली और चौड़ाई को बदल सकते हैं, जिससे यह आपकी साइट की स्टाइलिंग में बेहतर हो जाएगा।

selector:focus {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: red;
}

आशुलिपि:

selector:focus {
  outline: 1px dashed red;
}