CSSカスタム設定要素の点滅カーソル色

今回は、CSS要素の点滅カーソルの色のカスタマイズと、CSSカスタマイズ要素の点滅カーソルの色の設定についてのメモをお送りします。実際のケースを見てみましょう。

まえがき

ビジネス上のニーズにより、入力ボックスのテキストはフローティングカーソルとは異なる色にする必要があります。この問題の解決策を本で見つけるのは確かに難しく、日々の蓄積と経験が必要です。 。

解決策

• :<a href="http://www.php.cn/wiki/971.html" target="_blank">:first-line<code>:<a href="http://www.php.cn/wiki/971.html" target="_blank">:first-line</a> 伪元素

• 使用 <a href="http://www.php.cn/wiki/861.html" target="_blank">text-shadow</a> 和 text-fill-color

• 使用 caret-color

::fist-line 修改元素

原理: 一般来说，设置input框的 color 属性会修改文本内容的颜色，同时顺带改变光标的颜色。而::first-line也可以设置首行文本内容的颜色, 利用选择器的权重比，::first-line覆盖了前者的color,最终得到了想要的结果。

input.form-control {
    color: #05d380; /* 光标颜色 */
}
input.form-control::first-line {
    color: #333; /* 文本颜色 */
}

缺陷: 只适用于input框, 同时微信 webview 不支持。需要写两个选择器。

text-shadow 和  text-fill-color

原理: 先利用color设置文本和光标的颜色,  然后利用 text-shadow 设置文本阴影覆盖文本颜色, 最后使用text-fill-color 将文本颜色置为透明。

.form-control {
    color: #05d380; /* 光标颜色 */
    text-shadow: 0 0 0 #333; /* 文本颜色 */
    -webkit-text-fill-color: transparent;
}

缺陷: text-fill-color 属性不太支持 firefox, 目前尽量使用 -webkit- 前缀。

caret-color

原理: 这是CSS3最新的属性，目的就是为了解决光标颜色的问题。

.form-control {
    color: #333; /* 文本颜色 */
    caret-color: #05d380; /* 光标颜色 */
}

缺陷: 低版本IE浏览器不支持

兼容性考虑

为了兼容多端设备显示情况，我们必须要将一些情况考虑进来, 使用@support 擬似要素を使用する

<a href="http://www.php.cn/wiki/861.html" target="_blank">text-shadow<h2 style="text-align: left;"></h2></a> と を使用します。 text-fill-color

caret-color

::fist-line を使用して要素を変更します

> 原則: 一般に、入力ボックスの color 属性を設定すると、テキスト コンテンツの色が変更され、カーソルの色も変更されます。また、::first-line は、セレクターの重み比を使用して、テキストの最初の行の色を設定することもできます。::first-line は、前の をオーバーライドします。 >color を選択し、最終的に望ましい結果が得られました。

.form-control {
    color: #05d380; /* 光标颜色 */
    text-shadow: 0 0 0 #333; /* 文本颜色 */
    -webkit-text-fill-color: transparent;
}
@supports (caret-color: #05d380) {
    .form-control {
        color: #333; /* 文本颜色 */
        caret-color: #05d380; /* 光标颜色 */
    }
}

欠点: 入力ボックスにのみ適用され、WeChat Webview はサポートしていません。 2 つのセレクターを記述する必要があります。

text-shadow と text-fill-color
原則: まず color を使用してテキストとカーソルの色を設定し、次に text- shadow テキストの色を覆うように テキスト シャドウ

を設定し、最後に text- fill-color 文字の色を透明にします。

rrreee欠陥: text-fill-color 属性は firefox をサポートしていません。現在は -webkit- を使用しようとしています。 > プレフィックス。

caret-color

原則: これは CSS3 の最新の属性であり、その目的は次のとおりです。カーソルの問題を解決する 色は重要です。 rrreee🎜欠陥: 低バージョン IE ブラウザ 🎜サポートされていません🎜 🎜互換性の考慮事項🎜🎜 複数端末の表示状況に互換性を持たせるためには、いくつかの状況を考慮し、@support 🎜条件判断🎜を使用して利用可能かどうかを検出する必要があります。私の環境はモバイルディスプレイなので、モバイル端末との互換性が必要であれば、2番目と3番目のソリューションを組み合わせることで、デバイスの広い領域をカバーできます。 🎜rrreee🎜概要🎜🎜 最近の需要ではモバイル開発がますます増えており、デバイスの互換性は常に頭の痛い問題となっています。より良い方法でデバッグし、より互換性のあるコードを作成する方法です。必要なのは、エラーの再発を減らすために継続的に要約することです。 🎜🎜最終的にはみんなに役立つと思うので、ぜひ気に入って集めてください!!🎜🎜この記事の事例を読んだ後は、その方法を習得したと思います。その他の関連記事は php 中国語 Web サイトにあります。 🎜🎜推奨読書: 🎜🎜🎜MySQL データベースへのアクセスが拒否された場合の対処方法🎜🎜🎜🎜🎜Linux バックグラウンド実行ノード サービスの手順と手順 🎜🎜🎜

以上がCSSカスタム設定要素の点滅カーソル色の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。