フォーカスされたキャレットのスタイルを設定したい<input type='text'/>。具体的には、色と厚さ。

Webkitブラウザーを使用している場合は、次のCSSスニペットに従ってキャレットの色を変更できます。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;
}

次に例を示します。http：//jsfiddle.net/8k1k0awb/

「キャレット」はあなたが探している言葉です。私はそれはブラウザのデザインの一部であり、CSSの把握の範囲内ではないと信じています。

ただし、JavaScriptとCSSを使用してキャレットの変更をシミュレート する興味深い記事を次に示します。http: //www.dynamicdrive.com/forums/showthread.php?t=17450これは少しハックに思えますが、おそらく唯一の方法です。タスクを完了します。この記事の要点は次のとおりです。

ビューアのビューから画面のどこかにプレーンテキストエリアがあり、ユーザーが「偽のターミナル」をクリックすると、テキストエリアにフォーカスし、ユーザーが入力を開始すると、テキストエリアに入力したデータを単に追加します私たちの「ターミナル」にそれがそれです。

こちらはデモ中です

2018年更新

ある新しいCSSプロパティcaret-colorのキャレットに適用されるinputか、contenteditable領域が。サポートは拡大していますが、100％ではありません。これは色にのみ影響し、幅や他のタイプの外観には影響しません。

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

<input type="text"/>

CSS3では、これを行うためのネイティブな方法は、既存の回答で提案ハックのあらゆるずに、今そこにある：プロパティ。caret-color

以下に示すように、キャレットを使ってできることはたくさんあります。アニメーション化することもできます。

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

このcaret-colorプロパティは、Firefox 55およびChrome 60からサポートされています。サポートは、Safari Technical PreviewとOpera（まだEdgeではサポートされていません）でも利用できます。現在のサポートテーブルはこちらで確認できます。

ここにあなたが私が探しているかもしれないいくつかのベンダーがあります

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

フォーカスなど、さまざまな状態をスタイル設定することもできます

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

次のような特定の遷移を行うこともできます

::-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;}

この方法で-webkit-text-fill-colorと一緒にcolorプロパティを使用するだけで十分です。

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

<input type="text"/>

WebKitブラウザー（ただし、キャレットにシステムカラーがまだ使用されているiOS Safariでは機能しません）とFirefoxで機能します。

-webkit-text-fill-color CSSプロパティは、テキストの文字の塗りつぶし色を指定し ます。このプロパティが設定されていない場合、colorプロパティの値が使用されます。MDN

つまり、text-fill-colorでテキストの色を設定し、標準のcolorプロパティでキャレットの色を設定します。サポートされていないブラウザでは、キャレットとテキストの色は同じになります–キャレットの色。