【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;でチェックボックス/ラジオボタンを非表示に！！

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

【CSS】色が変わるラジオボタン作りました

こんにちは、素人エンジニアです。CSSで、ラジオボタンのチェックが入ると色が変わるようなデザインを作りました。少しtransformとtransitionを使って、動きも加えています。↓↓↓↓ぜひクリックしてください↓↓↓↓...

amateur-engineer.com

2021.03.09