Seleccione la primera letra del valor de entrada y cambie su color a través de CSS

¿Hay alguna manera de seleccionar la primera letra de los valores de entrada de texto y cambiar su color a través de CSS en la hoja de estilo? así que por ejemplo, tengo

 

Me gustaría seleccionar solo la primera letra de la propiedad value (*) y cambiarla a color rojo con CSS. ¿Es eso realmente posible hacer con css?

Editar: Me acabo de dar cuenta de que hay un error en Chrome que hace que el cursor se convierta en el lugar equivocado con contenteditable y ::first-letter . Funcionaría para cualquier otro caso.

Lancé mi propia solución (principalmente CSS) para usar

combinada con un un tiempo, y ahora la comparto contigo. Emula una entrada de texto, pero es un div. Si el div es text clase, entonces la entrada se fuerza a estar en 1 línea (de lo contrario, está más cerca de un área de textarea ). El div viene con un marcador de posición que es su atributo de data-placeholder . El atributo form-remote-input señala al JS que la input para llenar mantiene el valor del div. Para cumplir con los requisitos, agregué ::first-letter {color: #F00;} al div . Ejecute el fragmento de código para ver mi entrada falsa.

 function remote_input_updater(element, scope) { var scope = typeof scope !== 'undefined' ? scope : document; var remote_id = element.getAttribute('form-remote-input'); var remote_element = scope.querySelector("#" + remote_id); // Load initial value element.textContent = remote_element.value; // Add blur event updater var update_remote = function(e){ remote_element.value = element.textContent; if(element.textContent == "") { // Remove extra 
s that get added while (element.firstChild) { element.removeChild(element.firstChild); } } } element.addEventListener('blur', update_remote); }; [].forEach.call(document.querySelectorAll('[form-remote-input]'), function(element){remote_input_updater(element)});
 [contenteditable] { color: #000; border: 1px solid black; padding: 3px; min-height: 1.2em; } [contenteditable]:empty::before{ content: attr(data-placeholder); color: #666; } [contenteditable=true]:empty:focus::before{ content: "\00a0"; } [contenteditable]:focus { outline: none; } /* Forces single line */ .text[contenteditable] br{ display:none; } .text[contenteditable] * { display: inline; } #first-red::first-letter { color: #F00; } 
  

No creo que los cuadros de entrada permitan cambiar el estilo de la primera letra, parece que el sistema operativo no lo hace posible. De modo que puede hacer un div con la propiedad contentEditable igual a "true" , y obtener su contenido con JavaScript, o una pequeña solución con dos entradas alineadas horizontalmente, o algo así. Mira esto:

   .leftInput{ border-bottom: 1px solid black; border-left: 1px solid black; border-top: 1px solid black; border-right: 0px; width:10px; color:red; } .rightInput{ border-bottom: 1px solid black; border-right: 1px solid black; border-top: 1px solid black; border-left: 0px; margin-left: 0px; }      
 .leftInput { border-bottom: 1px solid black; border-left: 1px solid black; border-top: 1px solid black; border-right: 0px; width: 10px; color: red; } .rightInput { border-bottom: 1px solid black; border-right: 1px solid black; border-top: 1px solid black; border-left: 0px; margin-left: 0px; } 
  

No puedes hacerlo usando una “etiqueta de entrada”.

Tienes que usar una etiqueta div (cf: ¿Cómo puedo hacer que un DIV editable parezca un campo de texto? ), Luego usar otra etiqueta (como div) solo para tu primer carácter, luego aplicar tu estilo en él.

       
*Property Address :

Otra solución de DivinusVox (funciona solo si el primer carácter es una letra):

       
o Property Address :

OK, trate de dar a su entrada un relleno, envuelva su entrada en un div relativo y luego agregue un div colocado absoluto con su “*” dentro de este relleno de su cuadro de texto.

con jQuery o JavaScript oculte el div en el foco y muéstrelo de nuevo en desenfoque si el valor está vacío

 
*

el relleno, el valor superior e izquierdo es solo un ejemplo. tienes que encontrar los valores correctos

Puedes hacer esto por javascript y jquery como este

 var firstLetter = $("input").val().charAt(0); var val = $("input").val(); $("input").val(val.substr(1)); var span = "" + firstLetter + ""; $(span).insertBefore("input"); 

jsfiddle