बूटस्ट्रैप कैरेट (रंग और स्थिति) बदलना

Question

क्या कोई मेरी मदद कर सकता है: मैं कैरेट का रंग बदलना चाहता हूं और इसे इनपुट टेक्स्ट से रिश्तेदार नहीं बनाना चाहता, क्योंकि यह तब अच्छा दिखाना मुश्किल होता है जब यह होता है।

Answer 1

मैंने यह दो तरीके किए हैं। आप इस अपनी साइट पर सभी कैरेट को प्रभावित करना चाहते हैं (शायद प्राथमिकता नहीं दी) तो आप आप में कैरट सीएसएस वर्ग रद्द कर सकते थे:

.caret{border-top:4px solid red;} 

एक अन्य विकल्प के लिए एक कस्टम वर्ग बना सकते हैं और में कैरट में जोड़ने के लिए है अपने मार्कअप

.red{border-top:4px solid red;} 

<div class="btn-group"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action<span class="caret red"></span></button> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
    </ul> 
</div> 

मूल JSFiddle अद्यतन किया गया है http://jsfiddle.net/whoiskb/pE5mQ/

Answer 2

नहीं सबसे अच्छा तरीका है, लेकिन यह काम करना चाहिए:

बूटस्ट्रैप के बाद अपने स्टाइलशीट (सीएसएस) के लिए इस जोड़े शामिल हैं।

.btn-primary .caret, .btn-warning .caret, .btn-danger .caret, .btn-info .caret, .btn-success .caret, .btn-inverse .caret { 

    border-top-color: red; 

    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    -moz-opacity:1; 
    -khtml-opacity: 1; 
    opacity: 1; 
} 

Answer 3

इस Wordpress बूटस्ट्रैप के लिए

काम करता है

Answer 4

कैरेट की स्थिति बदलने के लिए यह आसान समाधान मिला।

//example of moving curser 20 pixels to the right 
input { 
    padding-left: 20px; 
    padding-right: -20px; 
} 

Answer 5

इस पोस्ट को देखें:

<span class="caret"></span> 

.caret { 
    display: inline-block; 
    width: 0; 
    height: 0; 
    margin-left: 2px; 
    vertical-align: middle; 
    border-top: 4px solid #000000; 
    border-right: 4px solid transparent; 
    border-bottom: 0 dotted; 
    border-left: 4px solid transparent; 
    content: ""; 
} 

यहाँ मैं सिर्फ सीमाओं थोड़ा स्थानांतरित कर दिया है: How do CSS triangles work?

उदाहरण के लिए, बूटस्ट्रैप द्वारा प्रदान की मानक "नीचे" तीर निम्नलिखित शैली का उपयोग करता है , और अब यह एक "ऊपर" तीर है। दाएं और बाएं कैरेट के लिए एक ही दृष्टिकोण किया जा सकता है।

<span class="up_caret"></span> 

.up_caret { 
    display: inline-block; 
    width: 0; 
    height: 0; 
    margin-left: 2px; 
    vertical-align: middle; 
    border-bottom: 4px solid #000000; 
    border-left: 4px solid transparent; 
    border-top: 0 dotted; 
    border-right: 4px solid transparent; 
    content: ""; 
} 

आशा है कि इससे मदद मिलती है! > @ लटकती-कैरट रंग

तो की तह तक जाना - लटकता: http://getbootstrap.com/customize/

कैरट रंग बदलने के लिए:

Answer 6

रंग बदलने के लिए एक और तरीका है के रूप में आप पर चाहते बूटस्ट्रैप कॉन्फ़िगर करने के लिए है साइट पर क्लिक करें और "कस्टम कस्टमस्ट्रैप संस्करण प्राप्त करने के लिए" & संकलित करें "पर क्लिक करें।

लेकिन टिप्पणी @ लटकती-कैरट रंग v3.1.0 के रूप में हटा दिया गया है

Answer 7

आप केवल कैरट के ही रंग बदलना चाहते हैं, आकार या स्थिति नहीं, कुछ सरल सीएसएस ठीक काम करता है (यह बूटस्ट्रैप 3.3.6 और वर्डप्रेस 4.5.2 है):

a span.caret { 
    color: #666 
}