CSS

【CSS】カスタマイズされたCSSラジオボタンとチェックボックスAwesomeCheckRadio

April 16, 2017
AwesomeCheckRadio

AwesomeCheckRadioはカスタマイズされたCSSラジオボタンとチェックボックス。

HTML

<ul>
    <li>
        <label for="text-checkbox">
            <input type="checkbox" name="test-checkbox" id="text-checkbox" />
            <span></span>
            Sample Check box
        </label>
    </li>
    <li>
        <label for="test-radio">
            <input type="radio" name="test-radio" id="test-radio" />
            <span></span>
            Sample radio button
        </label>
        <label for="test-radio1">
            <input type="radio" name="test-radio" id="test-radio1" />
            <span></span>
            Sample radio button
        </label>
    </li>
</ul>

Checkbox

  1. チェックボックスIDを含む “for”タグ付きのラベルで囲む必要があります
  2. チェックボックスボタンの後のラベルの内側に、空のスパンを含める必要があります
  3. スパンの後にラベル内にテキストを書くことができます

Radiobutton

  1. ラジオボタンIDを含む “for”タグ付きのラベルでラップする
  2. ラジオボタンの後のラベルの内側に、空のスパンを含める必要があります
  3. スパンの後にラベル内にテキストを書くことができます

MIT