skillup

技術ブログ

デザイン

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

投稿日:

CSS小ネタ系。

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

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

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

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

参考リンク

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

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

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

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

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

-デザイン
-

執筆者:


comment

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

関連記事

no image

CSSのレイアウト例 その1 カラムレイアウト

本日はCSSのレイアウト例に関してよくあるものを見てみようと思います。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」を買いましょう。 …

no image

キャッチ画像の扱いについて

今さらながらですが、サイトのトップなどに貼り付けるメインビジュアル系の画像の処置について。 スマホサイトオンリーだとあまり考えなくてもいいかもしれませんが、PCやレスポンシブの場合、ブラウザの幅が伸縮 …

no image

フォーム入力のポイント

以前のエントリーにならってさらにフォーム入力のデザイン上のポイントなどを。 Contents1 選択肢は横よりも縦で2 エラーがすぐにわかる入力欄を3 会員登録ではメリットをわかりやすく4 必須項目は …

no image

bulmaフレームワークに関して form編

前回に続き、bulmaフレームワークのCSSのformがらみに関して。 ソースはこちら メモ的に。 controlはinput,select,textareaなどをwrappingする要素。通常だとあ …

no image

pcサイトのコーディングに関しての注意点。

PCサイトのコーディングをしていて気づいたことなど。 最近スマホばっかりやっててPCサイトのコーディング自体ものすごい久しぶりでした・・・ 幅が縮むということを常に意識する。 縮めた時にページが崩れた …