【CSS】ラジオボタンを非表示!(チェックボックスも)

ラジオボタンを非表示 CSS
スポンサーリンク

こんにちは、素人エンジニアです。
わたしは最近、おしゃれなラジオボタンを作ったりしています。CSSで枠線をつけたり、背景を変えたりするのですが、どうしても気になる存在があります。

これが すごく 気になる

そう、クリックする○の部分です。実はこれ、消せるんです!!
ということで、ラジオボタンやチェックボックスの消し方を紹介します!

チェックボックス/ラジオボタンの消し方

やり方はとても簡単です。

  display: none;

これで、inputタグを非表示にすることができます。inputタグ全体に指定すると、input全てが非表示になりますので注意が必要です。指定するときは、チェックボックス/ラジオボタンだけ、class/idだけにすることをお勧めします。

チェックボックスのサンプル

例えば、こんな感じのチェックボックスがあるとします。

チェクボックスが 非表示に なるよ
<input type="checkbox" name="test" value="1" class="hide-checkbox">←チェクボックスが
<input type="checkbox" name="test" value="2" class="hide-checkbox">非表示に
<input type="checkbox" name="test" value="3" class="hide-checkbox">なるよ

これに、次のCSSを適用すると、チェックボックスが非表示になります。

input[type=checkbox].hide-checkbox{
  display: none;
}
チェクボックスが 非表示に なるよ

ラジオボタンのサンプル

ラジオボタンでも同様です。

これが すごく 気になる
<input type="radio" name="text" value="tmp1" class="hide-radiobtn">これが
<input type="radio" name="text" value="tmp2" class="hide-radiobtn">すごく
<input type="radio" name="text" value="tmp3" class="hide-radiobtn">気になる

こちらにdisplay: none;を適用するとラジオボタンが非表示になります。

input[type=radio].hide-radiobtn{
  display: none;
}
これが すごく 気になる

display: none;でチェックボックス/ラジオボタンを非表示に!!

チェックボックス/ラジオボタンを消したい時には、ぜひ活用ください。

コメント

タイトルとURLをコピーしました