CSSでクリックを無効にする方法

藏色散人

リリース： 2023-01-04 09:34:09

オリジナル

22150 人が閲覧しました

クリックを防ぐ Css メソッド: 1. "disabled" を設定して入力ボックスに無効な状態を追加します; 2. "cursor:not-allowed" を設定して無効な状態を無効な状態に追加します; 3. 「pointer-events:none」を設定するだけで十分です。

CSSでクリックを無効にする方法

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター

CSS は無効な状態、スタイル設定、および非クリック可能なイベントの動作

今日は、CSS の無効ステータス、スタイル設定、およびクリック不可のスタイルイベントの使用方法の例を共有します。参考値が高く、お役に立てれば幸いです。みんなに。手順に従って見てみましょう。

1: 無効な状態を入力ボックスに追加します

1、readonlyこのフィールドの値は変更できず、type="text" でのみ使用できることを示します。コピー、選択、およびフォーカスの受け取りが可能です。背景は、渡された値を受け取ることができます。 value.
コードのデモ:

<input type="text" name="firstname" value=""  readonly="readonly" />

ログイン後にコピー

2、disabled は、入力要素が無効になっており、編集できず、編集できないことを意味します。コピーされ、選択できず、フォーカスを受け取ることもできません。, 背景は渡された値を受け取ることができません。
コードのデモ:

　<input type="text" name="firstname" value="" disabled="disabled" />

ログイン後にコピー

2:無効ステータスにステータスを追加

マウスが使用できないクリックには主に 2 つの症状があります:

1. マウスがクリックできないときの表示状態: カーソル: 許可されていません

スタイルのデモ:

<style> 
    input[readonly]   //readonly:后台能接收此input框传值
    {
         background:#dddddd; //为带有readonly的input框添加背景颜色
         cursor: not-allowed  // 表示一个红色的圈加一个斜杠
    }
</style>

ログイン後にコピー

2。元のマウスイベントは実装できません: pointer-events:none

スタイルのデモ:

<style> 
    input[disabled] //disadled:后台不可接收此input传值
    {
         background:#dddddd; //为带有disabled的input框添加背景颜色
         pointer-events:none;//鼠标点击不可修改
    }
</style>

ログイン後にコピー

- - - - - - - - - - - - - - - - 拡大する - - - - - - - - - - --------------

cursor 定義と使用法

cursor 属性は、表示するカーソルの種類（形状）。 [推奨学習: "css ビデオチュートリアル "]

この属性は、マウスポインターが要素の境界内に置かれたときに使用されるカーソルの形状を定義します (ただし、CSS2.1 では定義されていません)どの境界がこの範囲を決定するか)。

#デフォルト: auto##継承: バージョン: JavaScript 構文: object#可能な値


はい
CSS2
	.style.cursor ="crosshair "

##値説明url注: URL で定義された使用可能なカーソルがない場合に備えて、このリストの最後に通常のカーソルを常に定義してください。デフォルトのカーソル (通常は矢印) Default 。ブラウザによって設定されたカーソル。カーソルは十字線として表示されます。 #pointerカーソルは、リンクを示すポインタ (手) として表示されます。 #textこのカーソルはテキストを示します。 waitこのカーソルは、プログラムがビジー状態であることを示します (通常は時計または砂時計)。 helpこのカーソルは、利用可能なヘルプ (通常は疑問符または吹き出し) を示します。


使用するカスタムカーソルの URL。	default
	auto
	十字線

#move	このカーソルは、オブジェクトが移動できることを示します。
e-resize	このカーソルは、長方形のボックスの端を右 (東) に移動できることを示します。
ne-resize	このカーソルは、長方形の端を上および右 (北/東) に移動できることを示します。
nw-resize	このカーソルは、長方形の端を上と左 (北/西) に移動できることを示します。
n-resize	このカーソルは、長方形のボックスの端を上 (北) に移動できることを示します。
se-resize	このカーソルは、長方形の端を下と右 (南/東) に移動できることを示します。
sw-resize	このカーソルは、長方形の端を下と左 (南/西) に移動できることを示します。
s-resize	このカーソルは、長方形のボックスの端を下 (南) に移動できることを示します。
w-resize	このカーソルは、長方形のボックスの端を左 (西) に移動できることを示します。

以上がCSSでクリックを無効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。