skillup

技術ブログ

デザイン

チェック状態のradio,checkでの要素の表示、非表示

投稿日:

CSS小ネタ系。

チェックボックスやラジオと隣接するテキストボックスがあって、チェックがあった時のみ表示したい。(例えばその他の自由入力欄)

完全に隣接の場合にはCSSの+が使えるんですが、そうもいかない場合、JavaScriptでこれを書かないといけません。

その場合、入力時だけでなく、一度データを保存した時にもJSを書かなくてはいけないので、できればCSSだけでできれば・・・と思っていました。

調べたところ、~なるセレクタがあり、これを使えば完全隣接でなくても表示、非表示をCSSだけでコントロールできるようです。

参考リンク

HTMLとCSSだけ!要素の表示・非表示を切り替える方法

上記のように直接隣接していなくても、inputと切り替え要素が同一階層であればCSSが効きます。

checkbox,radioに関しては使えそうです。

selectも試してみましたが、optionと切り替え要素が同一階層にないので無理そうです。

ただ覚えておくと結構応用範囲はありそう。

-デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

tableのレイアウトに関して

tableのcssに関して。 https://github.com/umanari145/css 幅を決めるのでも%表記をしたいときはauto、数値固定で行きたいときはfixed。 詳しくはリンクのt …

no image

GIMPでの薄膜レイヤー&縁取り

えー本業はプログラマなんですが、ガチンコ塾のブログの画像なんかもたまに作ってます。 まーほとんど素人なんですけどね(笑) 一応昔にPhotoshopとIllustratorは使ってました。今では忘却の …

no image

checkboxのカスタマイズ

ブラウザのディフォルトではなくcheckboxをカスタマイズしたいとき。 やったことなかったんですが、やってみると結構面白い。 Contents1 ソース2 参考リンク ソース まずはソースを。 ht …

no image

ワンポイント画像系のcssでの実装

主にリストやリンクなどのワンポイントアイコン系の画像をどう実装するかについて。 Contents1 list-style2 background-image3 Font Awesome4 after5 …

no image

CSSの適用ルールと継承について

前回のエントリーでも書いたようにいまいちわかっていないことが多いので、復習します。 Contents1 セレクタの種類2 セレクタの詳細度3 継承 セレクタの種類 CSSのセレクタには下記のようなもの …

アーカイブ