2018/06/29
css
備忘録です。
クリックで画像を切り替える方法というとjavascriptですが、CSSでも実装できる方法がありました。
参考サイト
:checked - CSS: カスケーディングスタイルシート
<div> <input type="radio" name="my-input" id="yes"> <label for="yes">Yes</label> <input type="radio" name="my-input" id="no"> <label for="no">No</label> </div> <div> <input type="checkbox" name="my-checkbox" id="opt-in"> <label for="opt-in">Check me!</label> </div> <select name="my-select" id="fruit"> <option value="opt1">Apples</option> <option value="opt2">Grapes</option> <option value="opt3">Pears</option> </select>
div, select { margin: 8px; } /* チェックが入った入力のラベル */ input:checked + label { color: red; } /* チェックが入ったラジオボタン */ input[type="radio"]:checked { box-shadow: 0 0 0 3px orange; } /* チェックが入ったチェックボックス */ input[type="checkbox"]:checked { box-shadow: 0 0 0 3px hotpink; } /* 選択されたオプション */ option:checked { box-shadow: 0 0 0 3px lime; color: red; }
CSSで背景画像を切り替える際にも使いましたが大丈夫でした。
外注案件のためサンプルページをお見せできませんがCSSの一部を公開します。
ちなみにMW WP Formのチェックボックスに使いました。
サンプルCSS
label[for="select_car-1"] span{ background:url(images/car/carclass_1_off.png) no-repeat; } label[for="select_car-1"] input[type="checkbox"]:checked + span{ background:url(images/car/carclass_1_on.png) no-repeat; }
2023/06/30
神社
御朱印
2023/06/15
Mac
Linux
2023/04/16
時宗
御朱印
2023/04/14
臨済宗
御朱印
2023/04/05
寺院
御朱印