बूटस्ट्रैप इनपुट फोकस नीली चमक को बदलें

Question

क्या किसी को पता है कि बूटस्ट्रैप को कैसे बदलना है input:focus? नीली चमक जो किसी inputक्षेत्र पर क्लिक करने पर दिखाई देती है ?

Comments

के रूप में मैं कई स्थानों में फोकस चयनकर्ता देख सकता हूँ मुझे यकीन नहीं है कि मुझे इसे बदलना चाहिए था?

— felix001

जाहिरा तौर पर @mdo 100% हमें एक चर के साथ चमक रंग निर्दिष्ट करने की अनुमति देने के खिलाफ है: github.com/twitter/bootstrap/issues/2742

— बेन हेरोल्ड

Answer 1

अंत में मैंने bootstrap.css में निम्नलिखित सीएसएस प्रविष्टि को बदल दिया

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
  border-color: rgba(126, 239, 104, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}

Comments

मैं टार्गेट लेकर आया हूंinput[type] {}

— मॉर्फियस

यह बूटस्ट्रैप 3.x के साथ आवश्यक नहीं है। अधिक जानकारी के लिए मेरा जवाब देखें।

— नैट टी

@ वर्तमान में यह चर Boostrap कस्टमाइज़र पर उपलब्ध नहीं है :(

— Caumons

@Caumons यह अब है। मैं @input-border-focusइस उत्तर के बजाय उपयोग करने की सलाह दूंगा।

— नैट टी

आप भूल गएselect

— डेविड मोरो

Answer 2

आप .form-controlसभी निविष्टियों का मिलान करने के लिए चयनकर्ता का उपयोग कर सकते हैं । उदाहरण के लिए लाल रंग में बदलने के लिए:

.form-control:focus {
  border-color: #FF0000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}

इसे अपनी कस्टम सीएसएस फ़ाइल में डालें और bootstrap.css के बाद लोड करें। यह textarea, चयन आदि सहित सभी इनपुट पर लागू होगा ...

Comments

यह वह नहीं है जो ओपी चाहता था। वह पूछ रहा था कि सीमा को कैसे बदलना है, न कि सीमा

— केविन मार्टिन जोस

@lonesword सही है, आप को सीमा-रंग और छाया-रंग दोनों को बदलना होगा। मैंने जवाब अपडेट किया है

— स्टर

यह @ felix001 के समाधान की तुलना में बहुत साफ है, और यह काम करता है

— 12

Answer 3

यदि आप बूटस्ट्रैप 3.x का उपयोग कर रहे हैं, तो आप अब नए @input-border-focusचर के साथ रंग बदल सकते हैं ।

अधिक जानकारी और चेतावनी के लिए प्रतिबद्ध देखें ।

में _variables.scss अद्यतन @input-border-focus।

इस चमक के आकार / अन्य भागों को संशोधित करने के लिए मिक्सिन्स / _forms.scss को संशोधित करें

@mixin form-control-focus($color: $input-border-focus) {
  $color-rgba: rgba(red($color), green($color), blue($color), .6);
  &:focus {
    border-color: $color;
    outline: 0;
    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px $color-rgba);
  }
}

Comments

क्या आपके पास इस बात का उदाहरण है कि इसे कैसे पूरा किया जाए या क्या किया जाए? अग्रिम धन्यवाद

— Seany84

आपको बूटस्ट्रैप स्टाइलशीट के कम या सैस संस्करणों का उपयोग करने की आवश्यकता है । फिर, बूटस्ट्रैप स्टाइलशीट आयात करने से पहले अपना कस्टम चर सेट करें और यह बूटस्ट्रैप डिफॉल्ट को ओवरराइड करेगा। आप या तो अपने स्टाइलशीट या कुछ और की तरह उपयोग precompile करने की आवश्यकता होगी Sprockets ।

— नैट टी

आप कम चर पर कस्टम परिवर्तन करने के लिए आधिकारिक बूटस्ट्रैप साइट का उपयोग भी कर सकते हैं: getbootstrap.com/customize

— red_trumpet

अच्छा है, लेकिन यह बटन और अन्य लिंक पर लागू नहीं होगा, केवल इनपुट और टेक्सारिया, जाहिरा तौर पर। बटन के लिए, आपको अभी भी .btn:focus { outline: none; }उदाहरण के लिए, ओवरराइड करना होगा ।

— जोक

यह उत्तर SASS / SCSS का उपयोग करने वालों के लिए काम करता है। @ इनपुट-आदेश फोकस में है _variables.scss।

— TyMayn

Answer 4

आप बूटस्ट्रैप शैली को इस तरह से बदले बिना .form-control:focus रंग को संशोधित कर सकते हैं :

जल्दी ठीक

.form-control:focus {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    } 

पूरी व्याख्या

1. बूटस्ट्रैपसीडीएन संस्करण का पता लगाएं जिसका आप उपयोग कर रहे हैं। जैसे मेरे लिए अभी 4.3.1 है: https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css
2. उस वर्ग की खोज करें जिसे आप संशोधित करना चाहते हैं। उदाहरण के लिए .form-control:focusऔर उन मापदंडों को कॉपी करें जिन्हें आप अपने सीएसएस में बदलना चाहते हैं। इस मामले में है border-colorऔर box-shadow।
3. के लिए एक रंग चुनें border-color। इस स्थिति में, मैं .btn-successचरण 1 में उल्लिखित बूटस्ट्रैप.css पृष्ठ में उस विशेष वर्ग की खोज करके, अपनी कक्षा के लिए हरे रंग के बूटस्ट्रैप का उपयोग करने का विकल्प चुनता हूं ।
4. आरजीबी के लिए आपके द्वारा चुने गए रंग को कन्वर्ट करें और box-shadowचौथे आरजीबीए पैरामीटर (0.25) को बदलने के बिना उस पैरामीटर में जोड़ें जो कि बूटस्ट्रैप में पारदर्शिता के लिए है।

Comments

महान, इसका सरल और काम कर रहा है, और मुझे हरे रंग की भी आवश्यकता है :)

— alfian5229

Answer 5

बूटस्ट्रैप v4.0.0 बीटा रिलीज़ के लिए आपको निम्नलिखित एक स्टाइलशीट में जोड़ा जाना चाहिए जो बूटस्ट्रैप को ओवरराइड करता है (या तो सीडीएन / लोकल लिंक के बाद बूटस्ट्रैप v4.0.0 बीटा में जोड़ें या !importantस्टाइलिंग में जोड़ें :

.form-control:focus {
  border-color: #6265e4 !important;
  box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}

बॉर्डर-कलर और आरजीबी को बॉक्स-शैडो पर बदलें, जिसके साथ आप कभी भी रंग शैली पसंद करेंगे।

Answer 6

बूटस्ट्रैप 4 में, यदि आप SASS को खुद से संकलित करते हैं, तो फ़ोकस शेडो की स्टाइलिंग को नियंत्रित करने के लिए आप निम्न चर बदल सकते हैं:

$input-btn-focus-width:       .2rem !default;
$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;

नोट: बूटस्ट्रैप 4.1 के रूप में, $input-btn-focus-colorऔर $input-btn-focus-box-shadowचर केवल इनपुट तत्वों के लिए उपयोग किए जाते हैं, लेकिन बटन के लिए नहीं। बटन के लिए फोकस छाया के रूप में हार्डकोड किया गया है box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);, इसलिए आप केवल $input-btn-focus-widthचर के माध्यम से छाया की चौड़ाई को नियंत्रित कर सकते हैं ।

Answer 7

यदि आप Chrome को प्लेटफ़ॉर्म डिफ़ॉल्ट "पीला" रूपरेखा दिखाना चाहते हैं तो ये परिवर्तन हैं।

textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-    input:focus {
    border-color: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    outline: -webkit-focus-ring-color auto 5px;
}

Comments

मैं क्रोम पीले रंग की रूपरेखा को कैसे निष्क्रिय कर सकता हूं?

— रॉय ली

वास्तव में, सभी को अक्षम न करें: फोकस की रूपरेखा (जैसा कि मैंने ऊपर सुझाव दिया है)। यह केवल उपयोगकर्ताओं के लिए कीबोर्ड की पहुंच के लिए भयानक है। आप ऊपर के रूप में प्लेटफ़ॉर्म डिफॉल्ट को अक्षम कर सकते हैं और उपयुक्त रूप से सुलभ कुछ में जोड़ सकते हैं: outline: dotted thin black;(या जो कुछ भी आपके परीक्षण से पता चलता है)

— पीटर

Answer 8

नीली चमक को अक्षम करने के लिए (लेकिन आप रंग, आकार, आदि को बदलने के लिए कोड को संशोधित कर सकते हैं), इसे अपने सीएसएस में जोड़ें:

.search-form input[type="search"] {  
    -webkit-box-shadow: none;
    outline: -webkit-focus-ring-color auto 0px;
} 

यहाँ एक असर दिखा रहा है: पहले और बाद में:

Comments

इसने मेरे लिए काम किया। लेकिन मुझे बॉर्डर-कलर भी जोड़ना पड़ा क्योंकि यह नीला छोड़ देगा।

— राचेल एस

Answer 9

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

input, textarea, button {outline: none; }

Comments

मुझे लगता है कि आपको भी इसकी आवश्यकता हो सकती है box-shadow: none;।

— सिल्वरब्लीट

इसने मेरे लिए काम किया, लेकिन मुझे @silverliebt द्वारा सुझाए गए के !importantबाद जोड़ना पड़ाbox-shadow

— सैंटोस

Answer 10

बॉडी टैग में एक आईडी जोड़ें। अपने स्वयं के सीएसएस में (बूटस्ट्रैप नहीं) नई बॉडी आईडी को इंगित करें और उस वर्ग या टैग को सेट करें जिसे आप ओवरराइड करना चाहते हैं और नए गुण। अब आप अपने बदलावों को खोए बिना कभी भी बूटस्ट्रैप को अपडेट कर सकते हैं।

html फ़ाइल:

  <body id="bootstrap-overrides">

सीएसएस फ़ाइल:

#bootstrap-overrides input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, textarea:focus{
  border-color: red;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}

यह भी देखें: बूटस्ट्रैप सीएसएस को ओवरराइड करने का सबसे अच्छा तरीका

Answer 11

असल में, बूटस्ट्रैप 4.0.0-बीटा (अक्टूबर 2017 तक) इनपुट तत्व को इनपुट [प्रकार = "टेक्स्ट"] द्वारा संदर्भित नहीं किया गया है, इनपुट तत्व के लिए सभी बूटस्ट्रैप 4 गुण वास्तव में फॉर्म आधारित हैं।

तो यह .form-control का उपयोग कर रहा है : फ़ोकस शैलियाँ। इनपुट तत्व के "फोकस" पर प्रकाश डालने के लिए उपयुक्त कोड निम्नलिखित है:

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: none;
}

लागू करने के लिए बहुत आसान है, बस सीमा-रंग की संपत्ति को बदलें ।

Comments

या अगर स्कैस का उपयोग कर रहे हैं, तो बूटस्ट्रैप 4.0.0-बीटा के लिए $ इनपुट-फ़ोकस-बॉर्डर-कलर वैरिएबल को ओवरराइड करें

— ज़ुहैब अली

मुझे लगता है कि आपको इसे भी जोड़ने की जरूरत हैbox-shadow: xpx ypx #80bdff;

Answer 12

बूटस्ट्रैप 3.3.7 में आप कस्टमाइज़र के फॉर्म सेक्शन में @ इनपुट-बॉर्डर-फोकस वैल्यू को बदल सकते हैं:

Answer 13

ऊपर बूटिंगस्ट्रैप 4.5 में @ इस्िंगर के उत्तर का निर्माण , मुझे न केवल रंग चर बल्कि box-shadowखुद को भी ओवरराइड करना पड़ा ।

$input-focus-width: .2rem !default;
$input-focus-color: rgba($YOUR_COLOR, .25) !default;
$input-focus-border-color: rgba($YOUR_COLOR, .5) !default;
$input-focus-box-shadow: 0 0 0 $input-focus-width $input-focus-color !default;

Answer 14

सिर्फ उपयोग क्यों नहीं?

 input:focus{
        outline-color : #7a0ac5;
    }

Answer 15

मैं इसे सीएसएस के साथ हल नहीं कर सका। ऐसा लगता है कि Boostrap को अंतिम बार मिल रहा है, भले ही मेरे पास बूटस्ट्रैप के बाद site.css हो। किसी भी सूरत में, यह मेरे लिए काम करता है।

$(document).ready(function () {
    var elements = document.getElementsByClassName("form-control");

    Array.from(elements).forEach(function () {
        this.addEventListener("click", cbChange, false);
    })

    });

function cbChange(event) {
    var ele = event.target;
    var obj = document.getElementById(ele.id);
    obj.style.borderColor = "lightgrey";
}

बाद में मैंने इसे सीएसएस में काम करने के लिए पाया। स्पष्ट रूप से केवल प्रपत्र-नियंत्रण के साथ

.form-control.focus, .form-control:focus {
    border-color: gainsboro;
} 

क्रोम डेवलपर टूल के शॉट्स से पहले और बाद में यहां दिए गए हैं। ध्यान केंद्रित करने और बंद करने के बीच सीमा के रंग में अंतर पर ध्यान दें। एक साइड नोट पर, यह बटन के लिए काम नहीं करता है। बटन के साथ। बटन के साथ आपको आउटलाइन प्रॉपर्टी को किसी में भी बदलना होगा।

Answer 16

फोकस से पहले इनपुट सीमा के लिए। आप अपना पसंदीदा रंग निर्दिष्ट कर सकते हैं जिसे आप उपयोग करना चाहते हैं और अन्य सीएसएस जैसे पैडिंग आदि

.input {
    padding: 6px 190px 6px 15px;
    outline: #2a65ea auto 105px ;
}

जब हम इनपुट पर ध्यान केंद्रित करते हैं। आप अपनी इच्छा के अनुसार अपनी पसंदीदा रंग रूपरेखा निर्दिष्ट कर सकते हैं

.input:focus{
    box-shadow: none;
    border-color: none;
    outline: lightgreen auto 5px ;
}

Answer 17

यदि आप छाया को हटाना चाहते हैं तो कक्षा shadow-noneको अपने इनपुट तत्व में पूरी तरह से जोड़ें ।