CSSのdisabled、疑似クラスを使ったスタイル設定（javascirptによるON・OFF）
:disabledはCSS疑似セレクタであり、ユーザーインターフェース欄を規制している場合に適用できるスタイルです。
ユーザー操作をコントロールするため、一定条件を満たせば付け外しできる様にするのが一般的です。
ユーザーに操作ができない事を視覚的に示すためのデザインが用いられます。
「:disabled」セレクタは、CSS疑似クラスの一種です。
:disabledセレクタは、ユーザーインターフェース要素がdisabledで無効化されている場合に適用できます。
ユーザーインターフェース要素とは、お問い合わせフォームなどでユーザーが入力する各種ボックス欄の事ですね。
disabledが入るとテキスト入力や選択、クリックなどの操作ができなくなり、フォーカスも受けつけません。
disabledが記述されたソース例
<form action="#"> <label for="name1">入力可能フィールド:</label> <input type="text"> <label for="name2">入力不可フィールド:</label> <input type="text" disabled> </form>
XHTMLの場合は属性の値を省略できないため「disabled="disabled"」と記述する必要があります。
HTML5の場合はdisabledのみでOKです。
サンプル結果
このようにdisabledを入れた下のフィールドは入力する事ができません。
disabledを適用できる要素
:disabledでスタイルを適用できる要素には、以下のものがあります。
<input>
<textarea>
<button>
<option>
<fieldset>
これらのHTMLタグに対してこのdisabledが入れてある場合に、専用スタイルが適用できる訳です。
CSSスタイル例
radioボックスにdisabledが設定された要素に適用する
input[type="radio"]{ position: relative; margin-right: 6px; } input[type="radio"]:disabled:after { position: absolute; content: ""; width: 14px; height: 14px; border-radius: 50%; background: #cc0000; }
サンプル結果
この様にdisabledを付けたラジオボタンは押す事ができず、マークが赤くなっています。
radioボタンのCSS
radioボタン自体を装飾する場合は一旦ボタン自体をdisplay: none;で非表示にします。
その上で新しいデザインをbeforeやafterで乗せるのがセオリーです。
今回は非表示にせず、disabledの場合にのみ:after疑似セレクタを乗せています。
disabledを入れたラジオマーク上にマウスを合わせると禁止マークのアイコンが出ます。
buttonにdisabledが設定された要素に適用する
button[type="submit"]:disabled { background: #ffcc00 }
サンプル結果
この様にbuttonを押す事ができず、背景色がオレンジになっています。
ブラウザサポート
現在サポートしているブラウザとそのバージョンです。ほぼ全てのブラウザで対応しています。
| Selector | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| :disabled | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
disabledが使われる理由
disabledを使う理由は様々ありますが、やはりユーザーインターフェースの状態をコントロールする事でしょう。
わかりやすく言うと、何かの条件を満たさないと次へ進めないようにする事です。
チェックを入れないとフォームを送信できない様にするなどが一般的ではないでしょうか。
無理にdisabledスタイルを適用する必要はありませんが、視覚的に「禁止されている事がわかる」デザインにする事が目的です。
disabledを設定する際の注意点
disabledは指定した要素を使用不可にするため、そのフィールドは使用不可となります。
使用不可となると同時に値を送信する事もできなくなります。
これはJSなどのスクリプトでinput要素にdisabled属性を指定した場合も同様になります。
disabledを設定する際には注意しましょう。
:enabledセレクタについて
disabledセレクタとは逆で、enabledというセレクタもあります。
disabledが「禁止」であるのに対し、enabledは「許可」という意味ですね
デフォルトでは全て「enabled」
ユーザーインターフェース欄における初期状態は全て、最初からenabledの扱いとなります。
お問い合わせフォームの作成時点では全て入力（操作）可能（enabled）から始まるためです。
ですのでソース上にあえて「enabled」の記述をする必要はありません。
要はdisableと付けていないところは全てenable扱いだという事です
CSS例
textarea:enabled { background: #ffff00; }
このように記述した場合、基本的に<textarea>タグの箇所は全て背景がffff00になります。
enabledと付けても付けてなくても同じ意味ですからね。
サンプル結果
この場合、enabledを入れていても入れていなくてもスタイルが適用されます。
disabledでないところは自動でenabledになるためです。
javascriptを使ったdisabledのON・OFF
次のサンプルではjavascriptを使って、項目にチェックを付けた時だけ入力フォームが入力操作可能になる状態を実現します。
元々inputフォームにはdisabedが指定してあり、入力操作はできません。
CSSで入力不可時の背景はオレンジにしてあります。
disabledの付け外し事例
HTMLソース（JS含む）
<label><input class="disabled" type="checkbox" name="チェック" value="" onclick="clickBtn1()">チェックボックス</label> <input class="check_disabled" type="text" id="b1" value="" disabled> <script> function clickBtn1(){ if (document.getElementById("b1").disabled === true){ // disabled属性を削除 document.getElementById("b1").removeAttribute("disabled"); }else{ // disabled属性を設定 document.getElementById("b1").setAttribute("disabled", true); } } </script>
CSS
input[type="text"].check_disabled:disabled{ background: #ffcc00 !important; }
サンプル例
上のチェックマークを付けると背景が白に変わって入力可能になります。
チェックを外すとオレンジに戻って入力不可になり、これが交互に繰り返します。
承諾マークにチェックを付けると送信ボタンが表示されたり、条件によって質問が分岐するアンケートフォームなどに便利です。
その他のインターフェース欄の疑似セレクタ
必須の項目チェックボックスに初めからチェックマークを付けておく場合、タグにcheckedを入れる事とがありますね。
このcheckedも疑似要素セレクタになりますので、:checkedという形でCSSスタイルが適用できます。
設定しておくと、チェックマークが付いた要素にのみスタイルが適用されるようになります。
CSS例
input:checked { height: 50px; width: 50px; }
この場合チェックが付いたチェックボックスは、縦横50pxのサイズになります。
チェックのON・OFFによるスタイル変化
次に紹介するサンプルでは、元々checkboxにcheckedは付けていません。
ここでチェックを付けると横と縦が50pxの大きさになり、外すと元に戻ります。
HTMLソース
<label> <input class="check_disabled" type="checkbox" name="項目" value="test">チェックを付けると大きくなる </label>
CSS
input[type="checkbox"].check_disabled:checked{ height: 50px; width: 50px; }
