CSS

【CSS】CSS3でチェックボックスとラジオのスタイルを変更input style CSS3

May 28, 2017
input-style-css3

input style CSS3はCSS3でチェックボックスとラジオのスタイルを変更します。

CSS

<head>
    <!-- ... -->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

HTML

Checkbox

<div class="row-styledcheck">
    <label for="id_check1">
        <input type="checkbox" name="check" id="id_check1">
        <span class="styledcheck"></span>
        Option 1
    </label>
</div>

Radio

<div class="row-styledcheck">
    <label for="id_check1">
        <input type="radio" name="radio" id="id_check1">
        <span class="styledcheck"></span>
        Option 1
    </label>
    <label for="id_check2">
        <input type="radio" name="radio" id="id_check2">
        <span class="styledcheck"></span>
        Option 2
    </label>
</div>