skillup

技術ブログ

デザイン

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

投稿日:

CSS小ネタ系。

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

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

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

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

参考リンク

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

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

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

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

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

-デザイン
-

執筆者:


comment

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

関連記事

no image

css tips display:table,marginの相殺,font-size指定,margin上下の%など

昨日、喫茶店でみていた参考書でみたCSSのネタに関して忘れないようにメモ。 Contents1 display:table2 inputのfocus時の青を消す3 marginの相殺4  font-s …

no image

HTML/JS/JavaScriptのキャッシュ機能の無効化に関して

AngularJSを使っていまして、更新したのにキャッシュ機能が働いていてブラウザでは変更が反映されてない・・・なんてことがちょいつづき、キャッシュを無効化する機能を調査しました。 まず通常のHTML …

no image

css小ネタ

実務でCSSをゴリゴリ書く機会があり、力不足を感じたので、メモを。 ライブラリlessやsassを使うとスコープを設定できるのでかなり楽 大まかな幅設定 スマホデザインの場合、幅を基本的に%で指定。p …

no image

WordPressのカリキュラムを考える

WordPressを触っていますが、ちょっと体系的に覚える必要がありそう。 結構長い間、触ってきましたが、体系立てて覚えていないのでいざこの処理は?ときかれると案外迷います。 例えば0から初心者に教え …

no image

レイアウトカラム落ち対策

自分のPCでは大丈夫なんだけど、別PCで見るとカラム落ちするケースがあり、ちょっと対策を。 もちろん幅調節とかそういうのはなし。 Contents1 flex-wrap:nowrap2 display …