web-dev-qa-db-fra.com

Changement de curseur bootstrap (couleur et position)

Je veux changer la couleur du curseur et le rendre non relatif par rapport au texte saisi, car il est difficile de le rendre beau quand il l'est.

twitter-bootstrapcaret
19
skrypalyk

J'ai pu le faire de deux manières. Si vous souhaitez que cela affecte tous les carets de votre site (probablement pas préférable), vous pouvez remplacer la classe caret css en vous:

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

Une autre option consiste à créer une classe personnalisée et à l'ajouter au curseur dans votre balise.

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

Le JSFiddle d’origine a été mis à jour http://jsfiddle.net/whoiskb/pE5mQ/

31
Kevin

Cela fonctionne pour Wordpress Bootstrap

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

Reportez-vous à cet article: Comment fonctionnent les triangles CSS?

Par exemple, la flèche standard "down" fournie par bootstrap utilise le style suivant:

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

Ici, je viens de transposer un peu les frontières, et maintenant c'est une flèche "en haut". La même approche peut être faite pour les carets droit et gauche.

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

J'espère que cela t'aides!

5
preynolds

Pas le meilleur moyen mais ça devrait marcher:

Ajoutez ceci à votre feuille de style (CSS) après l'inclusion 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;
}
1
HaNdTriX

Trouvé cette solution simple pour changer la position du curseur.

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

Si vous souhaitez uniquement modifier la couleur du curseur, et non la taille ou la position, certains CSS simples fonctionnent bien (il s’agit de Bootstrap 3.3.6 et Wordpress 4.5.2):

a span.caret {
  color: #666
}
0
ben.kaminski