web-dev-qa-db-ja.com

テキスト入力キャレットのスタイル設定

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

htmlcssinputcaret
111
Randomblue

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/

73
Nestor Britez

「キャレット」はあなたが探している言葉です。ただし、これはブラウザーの設計の一部であり、CSSの把握の範囲内ではないと考えています。

ただし、JavascriptとCSS（---）を使用してキャレットの変更をシミュレートするに関する興味深い記事がありますhttp://www.dynamicdrive.com/forums/showthread.php?t = 1745 それは少しハックのようですが、おそらくタスクを達成する唯一の方法です。この記事の主なポイントは次のとおりです。

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

ここ は実際のデモです

2018アップデート

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

input{
  caret-color: rgb(0, 200, 0);
}
<input type="text"/>
75
Michael Jasper

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テクニカルプレビューおよびOperaでもサポートされています（ただし、まだEdgeにはありません）。現在のサポートテーブルを表示できます here 。

36
Sacha Nacar

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

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

この方法で-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プロパティに設定します。サポートされていないブラウザでは、キャレットとテキストは同じ色（キャレットの色）になります。

3
Velda