Estilo de entrada de texto de cuidado

Question

Quiero dar estilo al cursor de un <input type='text'/> centrado. Específicamente, el color y el grosor.

Answer 1

Si está utilizando un navegador WebKit que puede cambiar el color del cursor siguiendo el siguiente fragmento de código 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í se muestra un ejemplo: http://jsfiddle.net/8k1k0awb/

Answer 2

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

Sin embargo, aquí es un interesante escribir sobre simulando un cambio de intercalación con Javascript y CSShttp://www.dynamicdrive.com/forums/showthread.php?t=17450 Me parece un poco hacky para mí, pero probablemente la única manera de lograr la tarea. El punto central del artículo es:

tendremos un área de texto sin formato en algún lugar de la pantalla fuera de la vista del espectador y cuando el usuario hace clic en nuestro terminal "falsa" Vamos a enfoque en el área de texto y cuando el usuario comienza a escribir simplemente agrega los datos escritos en el área de texto a nuestro "terminal" y eso es que.

HERE es una demostración de la acción

Answer 3

Aquí están algunos vendedores que te pueden mí buscando

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

Puede estados diferentes también de estilo, tales 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;} 

Answer 4

En CSS3, ahora hay una forma nativa de hacerlo, sin ninguno de los hacks sugeridos en las respuestas existentes: the caret-color property.

Hay muchas cosas que puede hacer con el caret, como se ve a continuación. Puede incluso be animated.

/* Keyword value */ 
caret-color: auto; 
color: transparent; 
color: currentColor; 

/* <color> values */ 
caret-color: red; 
caret-color: #5729e9; 
caret-color: rgb(0, 200, 0); 
caret-color: hsla(228, 4%, 24%, 0.8); 

La propiedad caret-color es apoyado desde Firefox 55 y Chrome 60. El apoyo también está disponible en la técnica previa Safari y en Opera (pero aún no en Edge). Puede ver las tablas de soporte actuales here.

Answer 5

Es suficiente para el uso del color propiedad junto con -webkit de texto de relleno de color esta manera:

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

<input type="text"/>

Obras en navegadores WebKit (pero no en iOS Safari, donde aún se usa el color del sistema para caret) y también en Firefox.

La propiedad CSS -webkit-text-fill-color especifica el color de relleno de caracteres de texto. Si esta propiedad no está establecida, se utiliza el valor de la propiedad de color . MDN

Esto significa que establecemos el color del texto con color de relleno de texto y color de intercalación con la propiedad de color estándar. En el navegador no compatible, el cursor y el texto tendrán el mismo color: el color del cursor.