css टेक्स्ट/इनपुट बॉक्स के आस-पास सीमा(रूपरेखा) को कैसे हटाएं?(क्रोम)




google-chrome input (9)

इस प्रश्न का उत्तर यहां दिया गया है:

क्या कोई पाठ / इनपुट बॉक्स के आस-पास नारंगी या नीली सीमा (रूपरेखा) को हटाने का तरीका बता सकता है? मुझे लगता है कि क्रोम पर यह केवल यह दिखाने के लिए होता है कि इनपुट बॉक्स सक्रिय है। मैं जिस इनपुट सीएसएस का उपयोग कर रहा हूं वह यहां है:

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


input:focus {
    outline:none;
}

इससे चल जाएगा। ऑरेंज रूपरेखा अब और दिखाई नहीं देगी।


वर्तमान उत्तर बूटस्ट्रैप 3.1.1 के साथ मेरे लिए काम नहीं किया। यहां मुझे ओवरराइड करना था:

.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}

यह सीमा यह दिखाने के लिए प्रयोग की जाती है कि तत्व केंद्रित है (यानी आप इनपुट में टाइप कर सकते हैं या एंटर के साथ बटन दबा सकते हैं)। आप इसे हटा सकते हैं, यद्यपि:

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

उपयोगकर्ताओं के लिए यह जानने के लिए कि आप किस तत्व के लिए कीबोर्ड फोकस रखते हैं, उपयोगिता के लिए कुछ और तरीका जोड़ना चाहें।

क्रोम अन्य तत्वों जैसे कि डीआईवी के रूप में इस्तेमाल किए जाने वाले मॉडलों के लिए हाइलाइटिंग भी लागू करेगा। उन और अन्य सभी तत्वों पर हाइलाइट को रोकने के लिए, आप यह कर सकते हैं:

*:focus {
    outline: none;
}

<input style="border:none" >

मेरे लिए अच्छा काम किया। यह खुद को एचटीएमएल में तय करना चाहता था ... :)


सेट

input:focus{
    outline: 0 none;
}

"महत्वपूर्ण!" बस मामले में है। यह जरूरी नहीं है। [और अब यह चला गया है। -ईडी।]


उपाय

*:focus {
    outline: 0;
}

पीएस: outline:0 बजाय outline:0 उपयोग करें outline:0 फोकस पर outline:none । यह वैध और बेहतर अभ्यास है।


यह निश्चित रूप से काम करेगा। ऑरेंज रूपरेखा अब और नहीं दिखाएगी .. सभी टैग के लिए आम:

*:focus {
    outline: none;
}

कुछ टैग के लिए विशिष्ट, पूर्व: इनपुट टैग

input:focus {
   outline:none;
}

टेक्स्ट बॉक्स की सीमा को हटाने और ब्राउज़र शैली की हाइलाइट सीमा को हटाने के लिए कृपया निम्न वाक्यविन्यास का उपयोग करें।

input {
    background-color:transparent;
    border: 0px solid;
    height:30px;
    width:260px;
}
input:focus {
    outline:none;
}

मुझे पता चला कि आप इसका भी उपयोग कर सकते हैं:

input:focus{
   border: transparent;
}




border