ट्विटर बूटस्ट्रैप टेक्स्टबॉक्स चमक और छाया को ओवरराइड करें

Question

मैं टेक्स्टबॉक्स और बॉर्डर की नीली चमक को दूर करना चाहता हूं, लेकिन मुझे नहीं पता कि किसी भी js या उसके css को कैसे ओवरराइड किया जाए, यहां देखें

EDIT 1

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

Comments

क्या आपके पास एक नया वर्ग जोड़ने की क्षमता है? यदि हां, तो border:none; box-shadow:none;

— jeschafe

@jeschafe यहाँ , और अभी भी कुछ भी नहीं

— कमल

क्या मैं पूछ सकता हूं कि आप किसी भी तरह से ऐसा क्यों करना चाहते हैं? कई कारणों से क्लिक पर फ़ोकस करने के लिए इसका लाभ है।

— ग्लिन जैक्सन

@GlynJackson कृपया एडिट 1

— कमल

नीचता का कारण न देखें। मैं उसी मुद्दे में भाग गया। हालाँकि मेरे मामले में मुझे सत्यापन त्रुटि को इंगित करने के लिए सीमा को लाल बनाने की आवश्यकता थी। हालांकि चमक के कारण यह केवल अदृश्य था।

— ओयबेक

Answer 1

.simplebox {
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

Answer 2

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

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(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */

  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}

Comments

यह ध्यान देने योग्य है कि <select>चयनकर्ता यहां शामिल नहीं है।

— ब्रायस यॉर्क

Answer 3

input.simplebox:focus {
  border: solid 1px #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: none;
  -moz-transition: none;
  -webkit-transition: none;
}

बूटस्ट्रैप को अनफोकस्ड स्टाइल में सेट करता है

Answer 4

कुछ खुदाई करने के बाद, मुझे लगता है कि उन्होंने इसे नवीनतम बूटस्ट्रैप में बदल दिया। नीचे दिए गए कोड ने मेरे लिए काम किया, इसका सरल बॉक्स नहीं इसका फॉर्म-कंट्रोल जो मैं उपयोग कर रहा था वह समस्या पैदा कर रहा था।

input.form-control,input.form-control:focus {
    border:none;
    box-shadow: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   -moz-transition: none;
   -webkit-transition: none;
}

Answer 5

बूटस्ट्रैप कस्टमाइज़ करने के लिए जाएं , @ इनपुट-बॉर्डर-फ़ोकस देखें, अपना इच्छित रंग कोड दर्ज करें, नीचे स्क्रॉल करें और "संकलन और डाउनलोड करें" पर क्लिक करें।

Answer 6

अगर आपको लगता है कि आप सीएसएस क्लास को संभाल नहीं सकते हैं तो बस टेक्स्टफील्ड में स्टाइल जोड़ें

<input type="text" style="outline:none; box-shadow:none;">

Answer 7

यह सीमा और फ़ोकस नीली छाया को हटा देगा।

input.simplebox,input.simplebox:focus {
  border:none;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -moz-transition: none;
  -webkit-transition: none;
}

http://jsfiddle.net/pE5mQ/64/

Answer 8

बूटस्ट्रैप 3 पर आईओएस पर एक छोटा सा शीर्ष शोड है, इसे इसके साथ हटाया जा सकता है:

input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
    -webkit-appearance: caret;
    -moz-appearance: caret; /* mobile firefox too! */
}

यहीं से मिला

Comments

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

— रयान वाल्टन

Answer 9

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

input:focus,
textarea:focus,
select:focus {
  outline: 0;
  box-shadow: none;
}

Answer 10

एचटीएमएल

<input type="text" class="form-control shadow-none">

सीएसएस

input:focus{
    border: 1px solid #ccc
}

Answer 11

.form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(103, 250, 34, 0.25);
}