Eu quero estilizar o cursor de um focado <input type='text'/>. Especificamente, a cor e a espessura.

Se você estiver usando um navegador de webkit, poderá alterar a cor do cursor seguindo o próximo snippet CSS. Não tenho certeza se é possível alterar o formato com 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;
}

Aqui está um exemplo: http://jsfiddle.net/8k1k0awb/

'Caret' é a palavra que você está procurando. Eu acredito, porém, que faz parte do design do navegador, e não está ao alcance do CSS.

No entanto, aqui está um artigo interessante sobre a simulação de uma mudança de cursor usando Javascript e CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450 Parece um pouco hacky para mim, mas provavelmente a única maneira de realizar a tarefa. O ponto principal do artigo é:

Teremos uma área de texto simples em algum lugar da tela, fora da visualização do visualizador e quando o usuário clicar em nosso "terminal falso", focaremos na área de texto e quando o usuário começar a digitar, simplesmente anexaremos os dados digitados na área de texto ao nosso "terminal" e pronto.

AQUI está uma demonstração em ação

Atualização de 2018

Há uma nova propriedade csscaret-color que se aplica ao cursor de uma área inputou contenteditable. O suporte está crescendo, mas não 100%, e isso afeta apenas a cor, não a largura ou outros tipos de aparência.

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

<input type="text"/>

No CSS3, agora existe uma forma nativa de fazer isso, sem nenhum dos hacks sugeridos nas respostas existentes: a caret-colorpropriedade .

Há várias coisas que você pode fazer com o cursor, conforme mostrado abaixo. Pode até ser animado .

/* 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);

A caret-colorpropriedade é compatível com Firefox 55 e Chrome 60. O suporte também está disponível no Safari Technical Preview e no Opera (mas ainda não no Edge). Você pode ver as tabelas de suporte atuais aqui .

Aqui estão alguns fornecedores que você pode estar procurando

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

Você também pode definir o estilo de diferentes estados, como foco

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

Você também pode fazer certas transições nele, 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;}

É suficiente usar a propriedade color juntamente com -webkit-text-fill-color desta forma:

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

<input type="text"/>

Funciona em navegadores WebKit (mas não no iOS Safari, onde ainda é usada a cor do sistema para acento circunflexo) e também no Firefox.

A propriedade CSS -webkit-text-fill-color especifica a cor de preenchimento dos caracteres do texto . Se esta propriedade não for definida, o valor da propriedade color é usado. MDN

Portanto, isso significa que definimos a cor do texto com a cor de preenchimento do texto e a cor do cursor com a propriedade de cor padrão. Em um navegador não compatível, o acento circunflexo e o texto terão a mesma cor - cor do acento circunflexo.