CSSで入力フォームのinputをdisabledにする方法

本ページにはプロモーションが含まれています。
CSS・html

厳密にいうと、フォームをクリックできなくする方法、です

javascriptでdisableをtrueにしたり、falseにしたりすることはできますが、CSSでdisableをtrueにする(ような動作となる)方法です。

厳密に言うと、値はサーバーへ送信されるので、disableというよりreadonlyになる方法です。

[adsense]

やりたかったこと

ワードプレスの購読者ユーザーに自身のメールアドレスを変更させたくない、けど、フロントエンドのプロフィール画面でメールアドレスは確認できるようにしたい、という感じです。

input部分に登録済みのメアドはvalueとして表示されますが、クリックできなくすることで変更できなくしました。

サンプルコード

htmlがこんな感じだとすると、

<input type="text" name="email" id="email" />

cssはこんな感じです。

input#email{
	pointer-events : none;
}





≫pointer-events(pointer-events – CSS | MDN)

≫WordPressでシンプルなチェックマークを表示するCSS

≫Wordpressのstyle.cssを部分的に無効にする方法

≫CSSでレスポンシブな角丸tableを作る方法

コメント

タイトルとURLをコピーしました