CSSでテキストボックスにカーソルを表示しないようにする方法-CSSチュートリアル-php.cn

CSSでテキストボックスにカーソルを表示しないようにする方法

WBOY

リリース： 2021-11-24 10:47:53

オリジナル

2119 人が閲覧しました

方法: 1. テキストボックス要素に「color:transparent;」スタイルを追加して、テキストボックス内のテキストとカーソルを透明にします。 2. 「text-shadow:h-shadow v-shadow」を追加します。テキストボックス要素にぼかし色を適用すると、テキストが表示されるだけです。

CSSでテキストボックスにカーソルを表示しないようにする方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

#css でカーソルのないテキストボックスを実現する方法

カーソルのないテキストボックスを実現するには、2 つの手順が必要です。テキストボックスを中に入れる必要がありますテキストが透明に設定されている場合、カーソルの色はテキストに従います。そのため、テキストが透明に設定されている場合、テキストボックス内のカーソルは透明になり、見えなくなります。

テキストが表示されないため、現時点では目標を達成できません。現時点で必要なのは、テキストボックスのテキストに text-shadow 属性を設定して表示することだけです。

この属性の構文は次のとおりです:

text-shadow: h-shadow v-shadow blur color;

ログイン後にコピー

CSSでテキストボックスにカーソルを表示しないようにする方法

例を通じてこのメソッドの適用を見てみましょう。例は次のとおりです:

<!DOCTYPE html>
<html>
<style>
  input{
    color: transparent;
    text-shadow: 0 0 0 #000;
  }
</style>
<body>
name:
<input type="text">
</body>
</html>

ログイン後にコピー

テキストボックスにスタイルが追加されていない場合、カーソルは次のようになります。

CSSでテキストボックスにカーソルを表示しないようにする方法