सफारी / क्रोम textinput / textarea चमक निकालें

Question

मैं सोच रहा था कि क्या सीएसएस का उपयोग करते हुए पाठ इनपुट / पाठ क्षेत्र पर क्लिक करने पर इसकी डिफ़ॉल्ट नीली और पीली चमक को दूर करना संभव है?

Comments

@ देखें, इसे निष्क्रिय करने का एक अन्य कारण यह है कि यदि आप चाहते हैं कि ग्लो-इफ़ेक्ट का उपयोग सभी ब्राउज़रों में काम करने के लिए किया जाए: अ-समर्थित आउटलाइन स्टाइल के बजाय फोकस करें।

— लैंगडन

यह वास्तव में कष्टप्रद है जब लोग इस बात पर दार्शनिक बातचीत शुरू करते हैं कि क्या प्रश्न "तकनीकी चीज" है, जब प्रश्न एक तकनीकी है।

— टिम

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

— william44isme

मुझे लगता है कि इसे निष्क्रिय करना और कस्टम बनाना पूरी तरह से ठीक है: सीएसएस के साथ फोकस प्रभाव ...

— ithil

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

— जेकगॉल्ड

Answer 1

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

हालांकि, यह तर्क दिया गया है कि चमक / रूपरेखा को बनाए रखना वास्तव में पहुंच के लिए फायदेमंद है क्योंकि यह उपयोगकर्ताओं को यह देखने में मदद कर सकता है कि वर्तमान में कौन सा तत्व केंद्रित है।

आप छद्म तत्व ': फ़ोकस' का उपयोग केवल उन निविष्टियों को लक्षित करने के लिए कर सकते हैं जब उपयोगकर्ता ने उन्हें चुना है।

डेमो: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/

Comments

बिल्कुल सही आपका बहुत बहुत धन्यवाद। यह भी सोचकर कि क्या मैं टेक्स्टारिया रिसाइज विकल्प को भी हटा सकता हूं (टेक्स्टारिया के नीचे दाईं ओर)?

— एलेक स्मार्ट

सावधानी के लिए +1; कृपया ऐसा कुछ भी करने से बचने का प्रयास करें जो उपयोगकर्ता की अपेक्षा को तोड़ता है कि उनका प्लेटफॉर्म कैसे प्रदर्शन करता है; आप वास्तव में उनकी उत्पादकता को नुकसान पहुंचा सकते हैं और अपनी वेब साइट का उपयोग करना कठिन बना सकते हैं।

— रोब

मेरे क्रोम / सफारी textarea आकार बदलने का विकल्प अपने जोखिम पर निकालें! मुझे यह कुछ साइटों पर भी वास्तव में उपयोगी, अपरिहार्य लगता है।

— JeeBee

आकार संभाल से छुटकारा पाने के लिए: आकार: कोई नहीं;

— डैनियल

बॉक्स-छाया: कोई नहीं;

— स्टाइल

Answer 2

यह प्रभाव गैर-इनपुट तत्वों पर भी हो सकता है। मैंने निम्नलिखित कार्यों को अधिक सामान्य समाधान के रूप में पाया है

:focus {
  outline-color: transparent;
  outline-style: none;
}

---

अद्यतन: आपको :focusचयनकर्ता का उपयोग नहीं करना पड़ सकता है । यदि आपके पास कोई तत्व है, तो कहें <div id="mydiv">stuff</div>, और आप इस div तत्व पर बाहरी चमक प्राप्त कर रहे हैं, बस सामान्य की तरह लागू करें:

#mydiv {
  outline-color: transparent;
  outline-style: none;
}

Comments

यह काम करता है, उदाहरण के लिए <button>, तत्वों के लिए, जो विशेष रूप से चमक-पर-फ़ोकस से लाभ नहीं उठाते हैं क्योंकि आप इसे वैसे भी क्लिक कर रहे हैं।

— 19

स्वीकृत उत्तर मेरे लिए OSX पर Chrome पर काम नहीं करता था। इस समाधान ने काम किया।

— बार्ट

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

— नील मुनरो

मेरे लिए क्रोम के नवीनतम संस्करण पर काम नहीं किया45.0.2454.101 m

— J86

@ कार्ल-डब्ल्यू के इस जवाब को नजरअंदाज नहीं किया जाना चाहिए! - यह एक div है कि एक लंगर से लिंक करने के लिए jQuery का उपयोग करते समय उपयोगी था। मैं div में एक iframe पुनः लोड कर रहा था, फिर मैन्युअल रूप से पुनः लोड किए बिना लंगर में जा रहा था। यह पृष्ठ को एंकर तक नीचे स्क्रॉल करेगा, लेकिन पूरी div में एक नीली बाहरी चमक थी। इस सीएसएस को div एलिमेंट पर जोड़ा, और यह काम कर गया! - नोट: मैं :focusचयनकर्ता के लिए उपयोग नहीं किया , मैं सिर्फ outline-colorऔर outline-styleमेरे div के सीएसएस पर डाल दिया ।

— वेड

Answer 3

वेबकीट आधारित ब्राउज़रों में टेक्स्टारिया का आकार बदलने पर:

Textarea पर अधिकतम-ऊँचाई और अधिकतम-चौड़ाई सेट करने से दृश्य आकार हैंडल को हटाया नहीं जाएगा। प्रयत्न:

resize: none;

(और हाँ मैं इससे सहमत हूँ "कुछ भी करने से बचने की कोशिश करें जो उपयोगकर्ता की अपेक्षा को तोड़ता है", लेकिन कभी-कभी इसका अर्थ होता है, यानी वेब एप्लिकेशन के संदर्भ में)

स्क्रैच से वेबकिट फॉर्म तत्वों के रंगरूप को अनुकूलित करने के लिए:

-webkit-appearance: none;

Comments

यह भी यह पूरी तरह से अक्षम किए बिना केवल एक दिशा में आकार बदलने, जो कुछ लेआउट के साथ अपनी बातचीत का समाधान हो सकता अनुमति देने के लिए संभव है: आकार बदलने के लिए संभावित मान हैं none, both, horizontal, vertical, और inherit।

— बोआन

मुझे यहां दिए गए समाधान पसंद हैं, '-webkit-उपस्थिति: कोई नहीं;' - इनपुट तत्वों से स्टाइल के सभी को निकालता है, इसलिए आप उन्हें स्टाइल कर सकते हैं जैसे आपको ज़रूरत है। धन्यवाद!

— हनाज़ेयर

मुझे नहीं पता कि इसमें इतने उतार चढ़ाव क्यों हैं, यह सवाल का जवाब नहीं है।

— पैडटॉक

Answer 4

कार्ल डब्ल्यू :

यह प्रभाव गैर-इनपुट तत्वों पर भी हो सकता है। मैंने निम्नलिखित कार्यों को अधिक सामान्य समाधान के रूप में पाया है

:focus {
  outline-color: transparent;
  outline-style: none;
}

मैं इसे समझाता हूँ:

• :focusइसका मतलब है कि यह उन तत्वों को स्टाइल करता है जो फोकस में हैं। इसलिए हम तत्वों को ध्यान में रखकर स्टाइल कर रहे हैं।
• outline-color: transparent; इसका मतलब है कि नीली चमक पारदर्शी है।
• outline-style: none; वही काम करता है।

Answer 5

मुझे यह अनुभव हुआ divकि एक क्लिक की घटना थी और 20 खोजों के बाद मुझे यह स्निपेट मिला जिसने मेरा दिन बचाया।

-webkit-tap-highlight-color: rgba(0,0,0,0);

यह वेबकिट मोबाइल ब्राउज़र में हाइलाइट करने वाले डिफ़ॉल्ट बटन को निष्क्रिय कर देता है

Answer 6

यह उन लोगों के लिए समाधान है जो पहुंच की परवाह करते हैं ।

कृपया, outline:none;फोकस रूपरेखा को अक्षम करने के लिए उपयोग न करें । यदि आप ऐसा करते हैं तो आप वेब की पहुंच को मार रहे हैं। ऐसा करने का एक सुलभ तरीका है।

की जाँच करें इस लेख है कि मैं एक सुलभ तरीके से सीमा को निकालने का तरीका समझाने के लिए लिखा है।

संक्षेप में विचार यह है कि जब हम कीबोर्ड उपयोगकर्ता का पता लगाते हैं तो केवल रूपरेखा सीमा दिखाते हैं। एक बार जब कोई उपयोगकर्ता अपने माउस का उपयोग करना शुरू कर देता है तो हम रूपरेखा को अक्षम कर देते हैं। परिणामस्वरूप आप दोनों में से सर्वश्रेष्ठ प्राप्त करते हैं।

Answer 7

यदि आप बूटस्ट्रैप के बटन से चमक को हटाना चाहते हैं (जो कि मेरी राय में बुरा नहीं है), तो आपको निम्नलिखित कोड की आवश्यकता होगी:

.btn:focus, .btn:active:focus, .btn.active:focus{
  outline-color: transparent;
  outline-style: none;
}

Comments

धन्यवाद। .btn:active:focusवास्तव में बटन दबाए रखते हुए चमक को हटाने के लिए आवश्यक था।

— होमरजम

Answer 8

इस समाधान ने मेरे लिए काम किया।

input:focus {
    outline: none !important;
    box-shadow: none !important;
}

Answer 9

कुछ समय ऐसा होता है कि बटन भी बाहरी रेखा को हटाने के लिए नीचे का उपयोग करते हैं

input:hover
input:active, 
input:focus, 
textarea:active,
textarea:hover,
textarea:focus, 
button:focus,
button:active,
button:hover
{
    outline:0px !important;
}

Answer 10

<select class="custom-select">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
</select>

<style>
.custom-select {
        display: inline-block;
        border: 2px solid #bbb;
        padding: 4px 3px 3px 5px;
        margin: 0;
        font: inherit;
        outline:none; /* remove focus ring from Webkit */
        line-height: 1.2;
        background: #f8f8f8;

        -webkit-appearance:none; /* remove the strong OSX influence from Webkit */

        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }
    /* for Webkit's CSS-only solution */
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        .custom-select {
            padding-right:30px;    
        }
    }

    /* Since we removed the default focus styles, we have to add our own */
    .custom-select:focus {
        -webkit-box-shadow: 0 0 3px 1px #c00;
        -moz-box-shadow: 0 0 3px 1px #c00;
        box-shadow: 0 0 3px 1px #c00;
    }

    /* Select arrow styling */
    .custom-select:after {
        content: "▼";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 60%;
        line-height: 30px;
        padding: 0 7px;
        background: #bbb;
        color: white;

        pointer-events:none;

        -webkit-border-radius: 0 6px 6px 0;
        -moz-border-radius: 0 6px 6px 0;
        border-radius: 0 6px 6px 0;
    }
</style>

Answer 11

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

input.slidingdoorbutton:focus { outline: none;}

Answer 12

मुझे अपने पाठ इनपुट क्षेत्रों से इस प्रभाव को हटाने की आवश्यकता थी, और मुझे अन्य तकनीकों को ठीक से काम करने के लिए नहीं मिला, लेकिन यह मेरे लिए काम करता है;

input[type="text"], input[type="text"]:focus{
            outline: 0;
            border:none;
            box-shadow:none;

    }

फ़ायरफ़ॉक्स और क्रोम में परीक्षण किया गया।

Answer 13

ज़रूर! आप सभी HTML तत्वों से नीले बॉर्डर को भी हटा सकते हैं *

*{
    outline-color: transparent;
    outline-style: none;
  }

तथा

 *{
     outline: none;   
   }