Agregar span dentro del marcador de posición del formulario

Quiero agregar un asterisco de color en el marcador de posición de mi formulario, ¿es posible? enter image description here

Aquí está la solución css pura IE10 +

.input-placeholder { position: relative; } .input-placeholder input { padding: 10px; font-size: 25px; } .input-placeholder input:valid + .placeholder { display: none; } .placeholder { position: absolute; pointer-events: none; top: 0; bottom: 0; height: 25px; font-size: 25px; left: 10px; margin: auto; color: #ccc; } .placeholder span { color: red; } 
 
Email *

A primera vista, no parece posible, pero puede ser una buena alternativa para crear su propio elemento de llave falso:

 
Email Address *

Violín

Hasta donde yo sé, esto no es posible.

Una solución que he visto utilizar en el pasado es agregar una imagen de fondo de un asterisco rojo a su campo de entrada, pero eso hace que sea difícil duplicar la alineación visual que está buscando. Más información sobre este método: use CSS para agregar automáticamente el asterisco de ‘campo requerido’ para formar entradas

Otra solución sería agregar el lapso (y el texto de marcador de posición) fuera del campo de entrada, pero eso requeriría algo de JavaScript para controlar cuándo es y no es visible.

Aquí hay un JSFiddle que acabo de crear para este método (usando jQuery): http://jsfiddle.net/nLZr9/

HTML

 

CSS

 .field { position: relative; height: 30px; width: 200px; } input, label { position: absolute; top: 0; left: 0; bottom: 0; top: 0; background: transparent; border: 0; padding: 0; margin: 0; text-indent: 5px; line-height: 30px; } 

JS

 $('.field input') .on( 'focus', function () { $(this).siblings('label').hide(); } ) .on( 'blur', function () { if ( !$(this).val() ) $(this).siblings('label').show(); } ); 

Encontré un complemento de jQuery que podría ser adecuado para ti, el plugin de pholder .
Si mira la demostración, el placholder del campo “Nombre” es rojo.

Puede haber otros complementos o quizás puedas editarlo. 🙂

Este es un buen caso para los pseudo-elementos.

 .someclass { position:relative; } .someclass:after { position:absolute; top:0; right:10px; content: "*"; color:#ff0000 } 

… ajústate a tu propio diseño.

Puede usar pseudoelementos en CSS (no es compatible con navegadores antiguos)

 .mandatory::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #ff0000; } .mandatory:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #ff0000; } .mandatory::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #ff0000; } .mandatory:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #ff0000; } .mandatory:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */ color: #ff0000; }