web-dev-qa-db-fra.com

ne pas changer la couleur de l’espace réservé avec Bootstrap 3

Deux questions:

  1. J'essaie de rendre le texte fictif blanc. Mais ça ne marche pas. J'utilise Bootstrap 3. JSFiddle demo

  2. Une autre question est de savoir comment changer la couleur de l’espace réservé et non globalement. C’est-à-dire que j’ai plusieurs champs, je veux qu’un seul champ ait un espace réservé blanc, tous les autres restent en couleur par défaut.

Merci d'avance.

html:

<form id="search-form" class="navbar-form navbar-left" role="search">
    <div class="">
        <div class="right-inner-addon"> <i class="icon-search search-submit"></i>
            <input type="search" class="form-control" placeholder="search" />
        </div>
    </div>
</form>

css:

.right-inner-addon {
    position: relative;
}
.right-inner-addon input {
    padding-right: 30px;
    background-color:#303030;
    font-size: 13px;
    color:white;

}
.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 10px 12px;
    /*  pointer-events: none; */
    cursor: pointer;
    color:white;
}


/* do not group these rules*/
::-webkit-input-placeholder { color: white; }
FF 4-18 
:-moz-placeholder           { color: white; }
 FF 19+
::-moz-placeholder          { color: white; }
 IE 10+
:-ms-input-placeholder      { color: white; }
csscss3twitter-bootstrap-3placeholder
64
Ivan Wang

Attribuez un espace réservé à un sélecteur de classe comme ceci:

.form-control::-webkit-input-placeholder { color: white; }  /* WebKit, Blink, Edge */
.form-control:-moz-placeholder { color: white; }  /* Mozilla Firefox 4 to 18 */
.form-control::-moz-placeholder { color: white; }  /* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder { color: white; }  /* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder { color: white; }  /* Microsoft Edge */

Cela fonctionnera alors, car un sélecteur plus fort remplaçait probablement votre global. Je suis sur une tablette, je ne peux donc pas inspecter et confirmer le sélecteur le plus puissant :) Mais cela fonctionne, je l'ai essayé avec votre violon.

Cela répond également à votre deuxième question. En l'attribuant à une classe ou à un id et en donnant à une entrée uniquement cette classe, vous pouvez contrôler les entrées à styler.

178
Dennis Puzak

Un problème a été signalé ici à propos de ceci: https://github.com/twbs/bootstrap/issues/14107

Le problème a été résolu par le commit suivant: https://github.com/twbs/bootstrap/commit/bd292ca3b89da982abf34473318c77ace3417fb5

La solution consiste donc à le redéfinir en #999 et non pas white comme suggéré (et redéfinissant tous les styles d'amorçage, pas seulement pour les styles webkit):

.form-control::-moz-placeholder {
  color: #999;
}
.form-control:-ms-input-placeholder {
  color: #999;
}
.form-control::-webkit-input-placeholder {
  color: #999;
}
22
mlunoe

Un possible Gotcha

Contrôle de santé recommandé - Assurez-vous d'ajouter le form-control classe à vos entrées.

Si vous avez bootstrap css chargé sur votre page, mais que vos entrées n’ont pas la
class="form-control" alors le sélecteur CSS d'espace réservé ne leur sera pas applicable.

Exemple de balises de les docs :

Je sais que cela ne s'appliquait pas au balisage de l'OP, mais comme je l'avais manqué au début et que je faisais un petit effort pour essayer de le déboguer, je poste cette réponse pour aider les autres.

6
cwd

J'utilise Bootstrap 4 et la solution de Dennis Puzak ne fonctionne pas pour moi.

La solution suivante fonctionne pour moi

.form-control::placeholder { color: white;} /* Chrome, Firefox, Opera*/
:-ms-input-placeholder.form-control { color: white; }  /* Internet Explorer*/
.form-control::-ms-input-placeholder { color: white; }  /* Microsoft Edge*/
3
Oleksandr Potomkin

Bootstrap a 3 lignes de CSS, dans votre fichier généré par bootstrap.css qui contrôle la couleur du texte de l’espace réservé:

.form-control::-moz-placeholder {
  color: #999999;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #999999;
}
.form-control::-webkit-input-placeholder {
  color: #999999;
}

Maintenant, si vous ajoutez ceci à votre propre fichier CSS, il ne remplacera pas celui de bootstrap car il est moins spécifique. Alors inscrivez votre formulaire dans un fichier puis ajoutez-le à votre CSS:

form .form-control::-moz-placeholder {
  color: #fff;
  opacity: 1;
}
form .form-control:-ms-input-placeholder {
  color: #fff;
}
form .form-control::-webkit-input-placeholder {
  color: #fff;
}

Voilà qui va remplacer le CSS de bootstrap.

2
rhysclay

Bootstrap Placeholder Mixin:

@mixin placeholder($color: $input-color-placeholder) {
  // Firefox
  &::-moz-placeholder {
    color: $color;
    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
  }
  &:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: $color; } // Safari and Chrome
}

maintenant appelez-le:

@include placeholder($white);
2
ßikrant Giri

Je pense que qwertzman est sur la bonne voie pour trouver la meilleure solution à ce problème.

Si vous ne souhaitez que définir un espace réservé spécifique, sa réponse reste valable.

Mais si vous souhaitez remplacer la couleur de tous espaces réservés (ce qui est plus probable) et si vous compilez déjà votre propre coutume Bootstrap MOINS, la réponse est même plus simple!

Remplacez cette variable LESS: @input-color-placeholder

2
D. Starr

Vous devriez vérifier cette réponse: Changer la couleur de l’espace réservé d’une entrée HTML5 avec CSS

Fonctionne sur la plupart des navigateurs, la solution de ce fil de discussion ne fonctionne pas sur FF 30+ par exemple

1
Hugo Gresse

Avec LESS le mixage réel est dans vendor-prefixes.less

.placeholder(@color: @input-color-placeholder) {
...
}

Ce mixin s’appelle dans forms.less à la ligne 133:

.placeholder();

Votre solution dans MOINS est:

.placeholder(#fff);

A mon avis, la meilleure façon de faire Il suffit d’utiliser Winless ou un compilateur composer tel que Gulp/Grunt, également et encore mieux/plus rapidement.

1
qwertzman

Les autres n'ont pas fonctionné dans mon cas (Bootstrap 4). Voici la solution que j'ai utilisée.

html .form-control::-webkit-input-placeholder { color:white; }
html .form-control:-moz-placeholder { color:white; }
html .form-control::-moz-placeholder { color:white; }
html .form-control:-ms-input-placeholder { color:white; }

Cela remplace bootstraps css car nous utilisons un niveau élevé de spécificité pour cibler les éléments .form-control.

0
Nick4814