左坊のメモ帳

WordPress など

*

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

   

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

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

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

スポンサーリンク

やりたかったこと

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

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

サンプルコード

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

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

cssはこんな感じです。
input#email{
pointer-events : none;
}

 - CSS・html