Changement de bootstrap signe de la couleur et de position)

Je veux changer la couleur du curseur et d'en faire non pas en fonction de la saisie de texte, car il est difficile de faire bonne impression quand il est.

InformationsquelleAutor skrypalyk | 2012-05-29

caret twitter-bootstrap

31

Il y a deux façons j'ai fait. Si vous voulez que cela affecte tous les carets sur votre site (probablement pas de préférence) puis vous pourriez remplacer le signe de la classe css à vous:
```
.caret{border-top:4px solid red;}
```
Une autre option est de créer une classe personnalisée et l'ajouter à l'accent circonflexe dans votre balisage
```
.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>
```
L'original JSFiddle a été mis à jour
http://jsfiddle.net/whoiskb/pE5mQ/
- Et ce sur le positionnement de l'accent circonflexe ? Comment pourrais-je résoudre mon problème ?
- Aussi, je n'arrive pas à le rendre actif nav-pilule ne change pas de couleur. Ne pouvez pas trouver de l'attribut correspondant.
- Pour changer de nav pilule de couleur, vous auriez à remplacer les actifs des classes liées à la pilule. Vous pouvez voir un exemple ici: jsfiddle.net/whoiskb/pE5mQ
- pas sûr de l'endroit où vous souhaitez positionner le curseur, donc je ne suis pas sûr de ce que vous cherchez là.
- C'est OK. Je viens de faire des classes différentes pour différentes listes déroulantes.
- J'ai des exigences similaires. Pouvez-vous s'il vous plaît partagez votre solution. Besoin de la caret point de droit lorsqu'il est fermé, et vers le bas lorsqu'il est ouvert.
- essayez jsfiddle. J'ai juste changé la couleur et l'a oublié. Je ne joue pas avec la conception de plus, si vous avez besoin d'expérimenter)
- Donc, l'essence de la solution: changer le border-color dans le .signe{} les règles de style. Le signe n'est pas un personnage, et donc n'est pas de style à l'aide de la CSS-couleur de la propriété.
- est cette solution ne fonctionne plus? dans jsfiddle exemple il n'y a pas de signes montrant à tous...
- oui, ça ne marche plus! pourriez-vous partager?
- Je viens de mettre à jour ma réponse originale à cette question avec plus de détails sur la mise en œuvre. J'ai aussi corrigé le JSFiddle exemple de travail.
InformationsquelleAutor Kevin
8

Cela fonctionne pour WordPress Bootstrap
```
//Caret color
.navbar .nav li.dropdown > .dropdown-toggle .caret {
    border-bottom-color: #FFFFFF;
    border-top-color: #FFFFFF;
}
```
- si vous souhaitez modifier le fichier de bootstrap.css au lieu de simplement ajouter une nouvelle catégorie pour le remplacer, comme je l'ai fait, c'est la façon de le faire.
InformationsquelleAutor Fred K

Se référer à ce post: Comment CSS travail des triangles?

Par exemple, le standard de la flèche "bas" fourni 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, j'ai juste transposé les frontières un peu, et maintenant c'est une flèche "haut". La même approche peut être fait pour la droite et la gauche carets.

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

Espérons que cette aide!

Vous êtes génial, vous m'avez donné les fondamentaux de style de l'accent circonflexe, et a été en mesure de personnaliser exactement comme je veux... Merci!

InformationsquelleAutor preynolds

1

Pas la meilleure façon mais cela devrait fonctionner:

Ajouter à votre feuille de style (CSS) après le démarrage comprennent.
```
.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;
}
```
- Merci!!!! Et ce sur le positionnement de l'accent circonflexe ? Comment pourrais-je résoudre mon problème ?
- Aussi, je n'arrive pas à le rendre actif nav-pilule ne change pas de couleur. Ne pouvez pas trouver de l'attribut correspondant.
InformationsquelleAutor 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;
}

InformationsquelleAutor erikdeagle

0

Un autre moyen de modifier la couleur est la configuration d'amorçage que vous le souhaitez:
http://getbootstrap.com/customize/

Pour signe de changement de couleur:
Des listes déroulantes -> @déroulant-caret-couleur

puis allez tout en bas du site et cliquez sur "Compiler &" Télécharger " pour obtenir votre coutume de démarrage de la version.

Mais remarque @déroulant-caret-la couleur est obsolète depuis la v3.1.0

InformationsquelleAutor Dado
0

Si vous voulez seulement changer la couleur du curseur lui-même, pas de la taille ou de la position, du simple CSS fonctionne très bien (C'est Bootstrap 3.3.6 et WordPress 4.5.2):
```
a span.caret {
  color: #666
}
```
InformationsquelleAutor ben.kaminski

Vous devez vous connecter pour publier un commentaire.