ホームページ > 記事 > ウェブフロントエンド > CSSを使って入力カーソルを非表示にする方法

CSSを使って入力カーソルを非表示にする方法

小云云オリジナル: 2017-12-22 15:05:334521ブラウズ

操作に影響を与えずに入力カーソルを非表示にする方法は? pシミュレーションを使用する、readonlyを設定する、disabledに設定する、自動ブラーを設定するなど、インターネットで多くの方法を検索しましたが、どれもニーズを満たすことができないことがわかり、最終的に完璧な方法を見つけました。この記事では、CSS を使用して入力カーソルを非表示にする方法について主に紹介します。これは不合理に思えますが、必要に応じて解決策を紹介します。非常に詳しく説明されていますので、必要な方は以下のエディターを参照してください。

方法は以下の通りです:

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

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

カーソルが文字に追従するので文字の色を透明に設定するとカーソルが消えます~

しかしここでは問題はテキストです。すべてが透明であれば、入力ボックスがあることに何の意味があるのでしょうか?心配しないで、下を向いてください~

テキストを表示します

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

テキストは透明ですが、テキストシャドウを使用してテキストの色を置き換えることができます。解決。。 HText-shadow 属性

文法:

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

説明:

x-Offset: (水平シャドウ) はシャドウの水平オフセット距離を示します。単位はピクセルである場合があります。、em またはパーセンテージなど。値が正の場合、影は右にオフセットされます。値が負の場合、影は左にオフセットされます。

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

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

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

CSSを使って入力カーソルを非表示にする方法

関連記事