Quiero diseñar el símbolo de intercalación de un centrado <input type='text'/>. En concreto, el color y el grosor.

Si está utilizando un navegador webkit, puede cambiar el color del signo 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:
    text-shadow: none;
    -webkit-text-fill-color: initial;
}

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

'Caret' es la palabra que está buscando. Sin embargo, creo que es parte del diseño de los navegadores y no está al alcance de css.

Sin embargo, aquí hay un artículo interesante sobre la simulación de un cambio de intercalación usando Javascript y CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450 Me parece un poco hacky, pero probablemente la única forma de cumplir 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 centraremos en el área de texto y cuando el usuario comience a escribir, simplemente agregaremos los datos ingresados ​​en el área de texto. a nuestra "terminal" y eso es todo.

AQUÍ hay una demostración en acción

Actualización 2018

Hay una nueva propiedad csscaret-color que se aplica al signo de intercalación de un área inputo contenteditable. El soporte está creciendo pero no al 100%, y esto solo afecta al color, no al ancho u otros tipos de apariencia.

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

<input type="text"/>

En CSS3, ahora hay una forma nativa de hacer esto, sin ninguno de los trucos sugeridos en las respuestas existentes: la caret-colorpropiedad .

Hay muchas cosas que puede hacer con el símbolo de intercalación, como se muestra a continuación. Incluso se puede animar .

/* 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 caret-colorpropiedad 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 esté buscando

::-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 aplicar estilos a diferentes estados, como 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 puedes 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;}

Es suficiente usar la propiedad de color junto con -webkit-text-fill-color de esta manera:

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

<input type="text"/>

Funciona en los navegadores WebKit (pero no en iOS Safari, donde todavía se usa el color del sistema para el símbolo de intercalación) y también en Firefox.

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

Esto significa que configuramos el color del texto con text-fill-color y el color de intercalación con la propiedad de color estándar. En un navegador no compatible, el símbolo de intercalación y el texto tendrán el mismo color: el color del símbolo de intercalación.