::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; }
Este código cambia el color de todos los marcadores de posición de entrada. Cómo hacer diferentes colores de marcador de posición para diferentes campos de entrada
tienes que ser mas especifico:
si coloca ::-webkit-input-placeholder en el CSS, seleccionará todos los marcadores de posición... pero esto no es lo que queremos
entonces usando :nth-of-type(); una pseudoclase, puede seleccionar la deseada fácilmente.
documentaciones útiles:
por lo que el código será así:
/* 1 */ input:nth-of-type(1)::-webkit-input-placeholder { color: green; } /* 2 */ input:nth-of-type(2)::-webkit-input-placeholder { color: blue; } /* 3 */ input:nth-of-type(3)::-webkit-input-placeholder { color: red; } <!-- 1 --> <input type="text" name="" id="" placeholder="hello world"> <!-- 2 --> <input type="text" name="" id="" placeholder="hello world"> <!-- 3 --> <input type="text" name="" id="" placeholder="hello world">Otra opción es usar ::placeholder para diseñar el placeholder de posición.
El pseudoelemento ::placeholder CSS representa el texto del marcador de posición en un elemento o .
Tenga en cuenta que Internet Explorer no es compatible con esto, pero dado que está usando webkit , está usando Chrome o Safari, esto funcionará para usted.
Ejemplo:
::placeholder{ color:red; opacity:0.6 } <input placeholder='yes'/>