Estilo de introducción de texto

Quiero diseñar el cursor de un enfocado. Específicamente, el color y el grosor.

Si está utilizando un navegador webkit, puede cambiar el color del símbolo de intercalación siguiendo el siguiente fragmento de CSS. No estoy seguro de si es posible cambiar el formato con CSS.

 input, textarea { font-size: 24px; padding: 10px; color: red; text-shadow: 0px 0px 0px #000; -webkit-text-fill-color: transparent; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #ccc; text-shadow: none; -webkit-text-fill-color: initial; } 

Aquí hay un ejemplo: http://jsfiddle.net/8k1k0awb/

‘Caret’ es la palabra que estás buscando. Aunque creo que es parte del diseño de los navegadores y no está al scope de CSS.

Sin embargo, aquí hay un escrito interesante sobre la simulación de un cambio de cursor utilizando Javascript y CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450 Me parece un poco raro, pero probablemente la única forma de lograr la tarea. El punto principal del artículo es:

Tendremos un área de texto simple en algún lugar de la pantalla fuera de la vista del espectador y cuando el usuario haga clic en nuestro “terminal falso” nos enfocaremos en el área de texto y cuando el usuario empiece a escribir simplemente agregaremos los datos escritos en el área de texto a nuestra “terminal” y eso es todo.

AQUÍ hay una demostración en acción


Actualización 2018

Hay un nuevo caret-color propiedad css que se aplica al cursor de una input o área contenteditable . El soporte está creciendo, pero no al 100%, y esto solo afecta el color, el ancho y otros tipos de apariencia.

 input{ caret-color: rgb(0, 200, 0); } 
  

En CSS3, ahora existe una forma nativa de hacerlo, sin ninguno de los hacks sugeridos en las respuestas existentes: la propiedad de caret-color .

Hay muchas cosas que puede hacer con el caret, como se ve a continuación. Incluso puede ser animado .

 /* Keyword value */ caret-color: auto; color: transparent; color: currentColor; /*  values */ caret-color: red; caret-color: #5729e9; caret-color: rgb(0, 200, 0); caret-color: hsla(228, 4%, 24%, 0.8); 

La propiedad de caret-color es compatible con Firefox 55 y Chrome 60. El soporte también está disponible en Safari Technical Preview y en Opera (pero aún no en Edge). Puede ver las tablas de soporte actuales aquí .

Aquí hay algunos proveedores que quizás yo busque

 ::-webkit-input-placeholder {color: tomato} ::-moz-placeholder {color: tomato;} /* Firefox 19+ */ :-moz-placeholder {color: tomato;} /* Firefox 18- */ :-ms-input-placeholder {color: tomato;} 

También puede diseñar diferentes estados, como el enfoque

 :focus::-webkit-input-placeholder {color: transparent} :focus::-moz-placeholder {color: transparent} :focus:-moz-placeholder {color: transparent} :focus:-ms-input-placeholder {color: transparent} 

También puede hacer ciertas transiciones en él, como

 ::-VENDOR-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} :focus::-VENDOR-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} 

Basta con usar la propiedad de color junto con -webkit-text-fill-colour de esta manera:

  input { color: red; /* color of caret */ -webkit-text-fill-color: black; /* color of text */ }