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

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

この記事の動作環境: 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 サイトの他の関連記事を参照してください。