1. ホーム
  2. html

[解決済み] テキスト入力キャレットのスタイリング

2022-07-20 09:13:24

質問

フォーカスされた <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:
    text-shadow: none;
    -webkit-text-fill-color: initial;
}

以下はその例です。 http://jsfiddle.net/8k1k0awb/