HTML&CSS

【html】ラジオボタンのデザインをオシャレに変更しよう！

今回は好きなようにラジオボタンをカスタマイズする方法を解説致します。

本来のラジオボタンを非表示にする

作成するのは下記のようなデザインのカスタマイズです。

作成するラジオボタン

実際にラジオボタンをカスタマイズする方法を解説していきます。
ソースは下記の通りになります。

<label><input type="radio" value="1" name="country"><span>日本</span></label>
<label><input type="radio" value="2" name="country"><span>中国</span></label>
<label><input type="radio" value="3" name="country"><span>アメリカ</span></label>

<style>
input[type="radio"]{
    display: none;
}

label span {
    display: inline-block;
    color: #5BC0DE;
    border: 1px solid #5BC0DE;
    border-radius: 34px;
    padding: 5px 20px;
    width: 130px;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    margin:0 5px;
}

label input:checked + span {
    color: #FFF;
    background: #5BC0DE;
}
</style>

一つ一つ見ていきます。
まず、下記のスタイルを当てて本来のラジオボタンを非表示にします。

input[type="radio"]{
    display: none;
}

ラジオボタンのデザインをカスタマイズする

非表示にしたラジオボタンの代わりに表示する、ラジオボタンを作成します。

label span {
    display: inline-block;
    color: #5BC0DE;
    border: 1px solid #5BC0DE;
    border-radius: 34px;
    padding: 5px 20px;
    width: 130px;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    margin:0 5px;
}

チェックをつけた状態をデザインする

上の項で作成したラジオボタンにチェックをつけた状態のスタイルを作成します。

チェックをつけた状態のスタイルは、「input:checked」で指定できます。
色を変えたり、文字を大きくしたりなど、チェックを付けていることが分かるようにしましょう。

label input:checked + span {
    color: #FFF;
    background: #5BC0DE;
}

まとめ

以上　ラジオボタンをカスタマイズでした。
やってみれば驚くほど簡単ですよね。

同じ方法でチェックボックスもカスタマイズできますので、お試しください。

-HTML&CSS
-,