CSSで入力カーソルを隠す

今回は、CSSを使用して入力カーソルを非表示にする方法と、CSSを使用して入力カーソルを非表示にする方法についてのメモをお届けします。以下は実際のケースです。見てみましょう。

はじめに

最近、会社のUIが突然私に質問をしてきました：「操作に影響を与えずに入力カーソルを非表示にする方法は？」。

多くの人が私と同じように、入力ボックスにカーソルを置かないのは反人道的な要件だと思うと思います。私たちがほんの小さなプログラマーであることが残念です。私たちには反論する権利がなく、黙って受け入れることしかできません...

インターネットで を検索したところ、多くの方法が見つかりました: P シミュレーションを使用する、読み取り専用に設定する、無効に設定する、自動ブラーを設定するなど、どれもニーズを満たすことができないことがわかりましたが、最終的に偉大な神が提供してくださった完璧な解決策を見つけました。

方法は次のとおりです:

まずカーソルを非表示にします

  <style>
    input{
      color: transparent;
    }
  </style>

カーソルがテキストを追従するので、テキストの色を透明に設定すると、カーソルが消えます~

しかし問題は、テキストは透明である必要があります 入力ボックスは何に使用されますか?心配しないで、下を向いてください~

テキストを表示します

  <style>
    input{
      color: transparent;
      text-shadow: 0 0 0 #000;
    }
  </style>

入力に text-shadow を設定します。テキストは透明ですが、テキスト シャドウを使用してテキストの色を置き換えることができます。これは完璧な解決策です。

text-shadow属性

構文:

text-shadow:x-offset y-offset blur color;

説明:

x-offset: (水平シャドウ) は、シャドウの水平オフセット距離を表します。できるpx 、 em 、またはパーセントなどです。値が正の場合、影は右にオフセットされます。値が負の場合、影は左にオフセットされます。

y-offset: (垂直シャドウ) は、影の垂直オフセット距離を表します。 px、em、またはパーセント待機のいずれかです。値が正の場合、影は下に移動します。値が負の場合、影は上に移動します。

ぼかし: (ぼかし距離) は影のぼかしの程度を示します。単位は px、em、またはパーセントです。 、など。ブラー値を負にすることはできません。値が大きいほど影はぼやけ、値が小さいほど影はより鮮明になります。もちろん、影のぼかし効果が必要ない場合は、ぼかし値を 0 に設定できます

Color: (影の色) は影の色を表します

この記事の事例を読んで方法をマスターすれば、さらに面白いことが起こるでしょう。php 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

css3アニメーションシーケンスアニメーション

CSSの奇妙なボックスモデルと標準ボックスモデルの使い方

以上がCSSで入力カーソルを隠すの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。