Cambiar el símbolo de la rutina de arranque (color y posición)

Question

¿Alguien me puede ayudar? Quiero cambiar el color del símbolo de intercalación y hacerlo no relativo al texto de entrada, porque es difícil hacerlo quedar bien cuando lo está.

Answer 1

Hay dos maneras en que he hecho esto. Si quieres que esto afecta a todos los signos de intercalación en su sitio (probablemente no se prefiere) entonces se podría sustituir la clase de acento circunflejo css en ti:

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

Otra opción es crear una clase personalizada y añadirlo a la intercalación en su marcado

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

El jsFiddle original ha sido actualizado http://jsfiddle.net/whoiskb/pE5mQ/

Answer 2

No es la mejor manera pero debería funcionar:

Agregar a su hoja de estilo (CSS) después de la rutina de carga incluyen.

.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

Esto funciona para Wordpress Bootstrap

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

Answer 4

Encontré esta solución simple para cambiar la posición del cursor.

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

Answer 5

Consulte este mensaje: How do CSS triangles work?

Por ejemplo, el "abajo" flecha estándar proporcionado por arranque utiliza el siguiente estilo:

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

Aquí acabo transpuesto las fronteras un poco , y ahora es una flecha "arriba". El mismo enfoque se puede hacer para los caretas derecha e izquierda.

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

Hope this helps!

Answer 6

Otra forma de cambiar el color es configurar de arranque que quiera en: http://getbootstrap.com/customize/

Para que el cambio de color de intercalación: Dropdowns -> @ desplegable-símbolo de intercalación color

luego ir a la parte inferior de la sitio y haga clic en "Compilar & Descargar" para obtener su versión de arranque personalizada.

Pero nota @ desplegable-símbolo de intercalación color está en desuso a partir del v3.1.0

Answer 7

Si desea cambiar sólo el color del propio símbolo de intercalación, no el tamaño o la posición, un poco de CSS sencilla funciona bien (Esto es Bootstrap 3.3.6 y Wordpress 4.5.2):

a span.caret { 
    color: #666 
}