Ändern Bootstrap Caret (Farbe und Position)

Question

Kann mir jemand helfen: Ich möchte die Farbe des Caret ändern und es nicht relativ von Eingabetext machen, weil es schwer ist, es gut aussehen zu lassen, wenn es ist.

Answer 1

Es gibt zwei Möglichkeiten, die ich getan habe. Wenn Sie dies alle Carets auf Ihrer Website beeinflussen wollen (wahrscheinlich lieber nicht), dann könnten Sie die caret CSS-Klasse in Sie außer Kraft setzen:

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

Eine weitere Option ist eine benutzerdefinierte Klasse zu erstellen und sie dem caret hinzufügen in Ihrem

Markup

.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> 

Das Original JSFiddle wurde aktualisiert http://jsfiddle.net/whoiskb/pE5mQ/

Answer 2

nicht der beste Weg, aber es sollte funktionieren:

diese zu Ihrem Stylesheet hinzufügen (CSS) nach dem Bootstrap umfassen.

.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

Dies funktioniert für Wordpress Bootstrap

// Caret color 
.navbar .nav li.dropdown > .dropdown-toggle .caret { 
    border-bottom-color: #FFFFFF; 
    border-top-color: #FFFFFF; 
} 

Answer 4

Diese einfache Lösung gefunden, um die Position des Carets zu ändern.

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

Answer 5

zu diesem Beitrag finden: How do CSS triangles work?

Zum Beispiel die Standard „nach unten“ Pfeil von Bootstrap vorgesehen verwendet die folgende Art:

<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: ""; 
} 

Hier habe ich die Grenzen ein wenig gerade umgesetzt haben und jetzt ist es ein "auf" Pfeil. Derselbe Ansatz kann für rechte und linke Caries durchgeführt werden.

<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: ""; 
} 

Hoffe, das hilft!

Answer 6

Eine weitere Möglichkeit, die Farbe zu ändern ist Bootstrap zu konfigurieren, wie Sie möchten auf: http://getbootstrap.com/customize/

Für caret Farbwechsel: Auswahlmenüs -> @ Dropdown-caret-Farbe

auf den Grund der dann weiter Website und klicken Sie auf "Kompilieren & Download", um Ihre benutzerdefinierte Bootstrap-Version zu erhalten. die Farbe des caret selbst ändern, nicht die Größe oder Position

Aber beachten Sie @ Dropdown-Caret-Farbe wird als von v3.1.0 veraltet

Answer 7

Wenn Sie nur wollen, ein paar einfache CSS funktioniert gut (Dies ist Bootstrap 3.3.6 und Wordpress 4.5.2):

a span.caret { 
    color: #666 
}