0

como puedo cambiar el campo del forms de bootstrap especificamente el placeholder de color blanco

introducir la descripción de la imagen aquí

4 respuestas 4

5

Puedes darle estilo al seudoelemento placeholder.

#input_id::placeholder {
  color:white;
}

Pero esa especificación no es estándar y sólo funcionará en navegadores recientes. (Chrome 57+, Firefox 51+, Opera 44+ y Safari 10.1+)

Para proveer compatibilidad con versiones anteriores (y con Internet Explorer o Edge), tendrás que darle estilo con prefijo para cada navegador:

::-webkit-input-placeholder  /* Chrome, Opera ySafari */
::-moz-placeholder  /* Firefox 19+ */
:-ms-input-placeholder  /* IE 10+ y Edge */
:-moz-placeholder  /* Firefox 18- */

#formGroupExampleInput {
  background-color:red;
  width:300px;
  color:white;
}

#formGroupExampleInput::placeholder {
 color:white;
}

#formGroupExampleInput::-webkit-input-placeholder {
  color: white;
}
#formGroupExampleInput::-moz-placeholder {
  color: white;
}
#formGroupExampleInput:-ms-input-placeholder {
  color: white;
}
#formGroupExampleInput:-moz-placeholder {
  color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="form-group">
    <label for="formGroupExampleInput">Primer Nombre</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Primer Nombre">
  </div>

Probablemente quieras que el placeholder sea ligeramente más oscuro para diferenciarlo del texto ingresado.

2

    <html>
      <head>
      <style>
          input{
            background: skyblue;
          }
          
          #pnombre::placeholder {
            color: blue;
          }
          
          #snombre::placeholder{
            color: white;
          }
      </style>
      </head>
      <body>
        <form>
          <input type"text" id="pnombre" placeholder="primer nombre">
          <input type"text" id="snombre" placeholder="segundo nombre">
        </form>
      </body>
    </html>

2

Solo coloca:

  <html>
      <head>
      <style>
          #pnombre {
            background-color: blue;
          }
          
          #snombre{
           background-color: white;
          }
      </style>
      </head>
      <body>
        <form>
	  <input type"text" id="pnombre" placeholder="primer nombre">	
          <input type"text" id="snombre" placeholder="segundo nombre">	
        </form>
      </body>
    </html>

0

Puedes usar el pseudo-selector de CSS placeholder

::placeholder{
color: white;
}

input{
background-color: orange;
color: white;
}

::placeholder{
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" placeholder="hola mundo">

Saludos

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.