css - fondo - no puede cambiar el color del marcador de posición con Bootstrap 3

div style background color

Question

Dos preguntas:

1. Estoy tratando de hacer que el texto del marcador de posición sea blanco. Pero no funciona. Estoy usando Bootstrap 3. JSFiddle demo

2. Otra pregunta es cómo cambio el color del marcador de posición no globalmente. Es decir, tengo varios campos, quiero que solo un campo tenga marcador de posición blanco, todos los demás permanecen en el color predeterminado.

Gracias por adelantado.

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

Answer 1

A Posible Gotcha

Comprobación de cordura recomendada : asegúrese de agregar la clase de form-control a sus entradas.

Si tiene cargado css de carga en su página, pero sus entradas no tienen el
class="form-control" , el selector CSS de marcador de posición no se aplicará a ellos.

Ejemplo de marcado de los documentos :

Sé que esto no se aplicaba al marcado del OP, pero como me perdí esto al principio y dediqué un poco de esfuerzo en depurarlo, estoy publicando esta respuesta para ayudar a otros.

Answer 2

Asigna el marcador de posición a un selector de clase como este:

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

Funcionará entonces ya que un selector más fuerte probablemente esté anulando su global. Estoy en una tableta, así que no puedo inspeccionar y confirmar qué selector más fuerte era :) Pero funciona, lo probé en tu violín.

Esto también responde a tu segunda pregunta. Al asignarlo a una clase o identificación y dar una entrada solo a esa clase, usted puede controlar qué entradas usar.

Answer 3

Boostrap 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
}

ahora llámalo:

@include placeholder($white);

Answer 4

Bootstrap tiene 3 líneas de CSS, dentro de su archivo bootstrap.css generado que controla el color del marcador de posición:

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

Ahora, si agrega esto a su propio archivo CSS, no anulará el bootstrap porque es menos específico. Así que asocie su formulario dentro de un y luego agréguelo a su 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;
}

Voila que anulará el CSS de bootstrap.

Answer 5

Con MENOS la mezcla real está en proveedores-prefijos.

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

Esta mixin se llama en forms.less en la línea 133:

.placeholder();

Su solución en LESS es:

.placeholder(#fff);

Imho es la mejor manera de ir. Solo use Winless o un compilador de compositor como Gulp / Grunt, también, y aún mejor / más rápido.

Answer 6

Creo que qwertzman está en el camino correcto para la mejor solución a esto.

Si solo quería diseñar un marcador de posición específico, entonces su respuesta sigue siendo cierta.

Pero si desea anular el color de todos los marcadores de posición, (que es más probable) y si ya está compilando su propio Bootstrap LESS, ¡la respuesta es aún más simple!

Anula esta variable LESS: @input-color-placeholder

Answer 7

Debería echar un vistazo a esta respuesta: Cambiar el color del marcador de posición de una entrada HTML5 con CSS

Trabajar en la mayoría de los navegadores, la solución en este hilo no funciona en FF 30+, por ejemplo

Answer 8

Estoy usando Bootstrap 4 y la solución de Dennis Puzak no funciona para mí.

La siguiente solución funciona para mí

.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

Answer 9

Hubo un problema publicado aquí sobre esto: https://github.com/twbs/bootstrap/issues/14107

El problema se resolvió mediante este compromiso: https://github.com/twbs/bootstrap/commit/bd292ca3b89da982abf34473318c77ace3417fb5

La solución por lo tanto es anularla al #999 y no white como se sugiere (y también anulando todos los estilos de bootstraps, no solo para webkit-styles):

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