twitter bootstrap - example - Cambio de caret bootstrap(color y posición)

bootstrap alert floating

Question

Quiero cambiar el color del cursor y no hacerlo relativo al texto de entrada, porque es difícil hacer que se vea bien cuando lo es.

Answer 1

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

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

Answer 2

Esto funciona para Wordpress Bootstrap

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

Answer 3

Hay dos maneras en que he hecho esto. Si desea que esto afecte a todos los usuarios de su sitio (probablemente no sea el preferido), entonces podría anular la clase de CSS en su sitio:

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

Otra opción es crear una clase personalizada y agregarla al caret en su marca

.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 se ha actualizado http://jsfiddle.net/whoiskb/pE5mQ/

Answer 4

No es la mejor manera pero debería funcionar:

Agregue esto a su hoja de estilo (CSS) después de que incluya Bootstrap.

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

Otra forma de cambiar el color es configurar bootstrap como desee en: http://getbootstrap.com/customize/

Para el cambio de color de caret: Dropdowns -> @ dropdown-caret-color

luego ve a la parte inferior del sitio y haz clic en "Compilar y descargar" para obtener tu versión de arranque personalizada.

Pero note @ dropdown-caret-color está obsoleto a partir de v3.1.0

Answer 6

Refiérase a esta publicación: ¿Cómo funcionan los triángulos CSS?

Por ejemplo, la flecha estándar "hacia abajo" proporcionada por bootstrap usa 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 de transponer un poco las fronteras, y ahora es una flecha "arriba". El mismo enfoque se puede hacer para el carete derecho e izquierdo.

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

¡Espero que esto ayude!

Answer 7

Si solo desea cambiar el color del caret en sí, no el tamaño o la posición, algunos CSS simples funcionan bien (esto es Bootstrap 3.3.6 y Wordpress 4.5.2):

a span.caret {
color: #666
}