skillup

技術ブログ

デザイン

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

投稿日:

CSS小ネタ系。

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

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

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

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

参考リンク

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

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

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

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

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

-デザイン
-

執筆者:


comment

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

関連記事

no image

固定されたナビ(ヘッドとサイド)

boostrapでサイトを作るときにヘッダーとサイドバーを固定したいときについてメモします。 Contents1 ヘッダーを固定したい場合2 サイドバーを固定したい場合3 参考リンク ヘッダーを固定し …

no image

CSSのレイアウト例 その3 固定+リキッドレイアウト

本日は固定レイアウト+リキッドレイアウトについて。 リキッドレイアウトとはブラウザの幅に合わせて表示を変える方法でして、スマホが一般的となった現在では非常によく使われています。 今回解説するのは例えば …

no image

フォーカス時のみ書き込み可能になるHTML要素について。contenteditableなど

通常はただのテーブル(or普通のHTML)ですが、クリックするとinputになり、入力が可能になる手法について。 contenteditableなど 普通のHTML要素に [crayon-6105c6 …

no image

CSSを書くときのコツ

前回のCSSのルールを踏まえて、今回はCSSを書くときの概念的なルールです。 Contents1 CSSのデメリット1.1 抽象化が難しい1.2 すべてのルールがグローバルスコープ2 CSSを書くとき …

no image

positionを使うときに注意すること

positionを使ったときに色々なまとめ。 親>子>孫だったときに親がrelative、子、孫がabsoluteだと孫の基準点は子になる(ソース参照) position:absolute …