トップへ(mam-mam.net/)

コピペで使えるCSSとSVG画像でラジオボタンのデザイン4種類

検索：
オン オフ

SVGアイコンを使ったオリジナル ラジオボタン１

SVGアイコンを使ったオリジナル ラジオボタン２

SVGアイコンを使ったオリジナル ラジオボタン３

SVGアイコンを使ったオリジナル ラジオボタン４

htmlおよびcss

<style>
  .fontsize24px{
    font-size:24px;
    line-height:1em;
    vertical-align:bottom;
  }
  .mam-svg-radio {
    display: none;
  }
  .mam-svg-radio-on{
    display: none;
    width:1em;
    height:1em;
  }
  .mam-svg-radio-off{
    display: inline-block;
    width:1em;
    height:1em;
  }
  .mam-svg-radio-text{
    user-select: none;
  }
  .mam-svg-radio:checked ~ .mam-svg-radio-on{
    display: inline-block;
  }
  .mam-svg-radio:checked ~ .mam-svg-radio-off{
    display: none;
  }
</style>
<svg style="display:none;">
  <symbol id="mam-svg-radio1-on" viewBox="0 0 64 64">
    <title id="mam-svg-radio1-on-title">オン</title>
    <path d="M4,32 a28,28 0,0,0 56,0 a28,28 0,0,0 -56,0 z" style="fill:#000;stroke:#999;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
  </symbol>
  <symbol id="mam-svg-radio1-off" viewBox="0 0 64 64">
    <title id="mam-svg-radio1-off-title">オフ</title>
    <path d="M4,32 a28,28 0,0,0 56,0 a28,28 0,0,0 -56,0 z" style="fill:#fff;stroke:#999;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
  </symbol>
</svg>
<svg style="display:none;">
  <symbol id="mam-svg-radio2-on" viewBox="0 0 64 64">
    <path d="M4,32 a28,28 0,0,0 56,0 a28,28 0,0,0 -56,0 z" style="fill:#fff;stroke:#999;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
    <path d="M16,32 a16,16 0,0,0 32,0 a16,16 0,0,0 -32,0 z" style="fill:#000;stroke:none;stroke-width:0;stroke-linecap:square;stroke-linejoin:miter;" />
  </symbol>
  <symbol id="mam-svg-radio2-off" viewBox="0 0 64 64">
    <path d="M4,32 a28,28 0,0,0 56,0 a28,28 0,0,0 -56,0 z" style="fill:#fff;stroke:#999;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
  </symbol>
</svg>
<svg style="display:none;">
  <symbol id="mam-svg-radio3-on" viewBox="0 0 64 64">
    <path d="M4,32 a28,28 0,0,0 56,0 a28,28 0,0,0 -56,0 z" style="fill:#fff;stroke:#999;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
    <path d="M16,32 l32,0 m-16,-16 l0,32" style="fill:#none;stroke:#000;stroke-width:12;stroke-linecap:round;stroke-linejoin:miter;" />
  </symbol>
  <symbol id="mam-svg-radio3-off" viewBox="0 0 64 64">
    <path d="M4,32 a28,28 0,0,0 56,0 a28,28 0,0,0 -56,0 z" style="fill:#fff;stroke:#999;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
  </symbol>
</svg>
<svg style="display:none;">
  <symbol id="mam-svg-radio4-on" viewBox="0 0 64 64">
    <path d="M4,32 a28,28 0,0,0 56,0 a28,28 0,0,0 -56,0 z" style="fill:#fff;stroke:#999;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
    <path d="M16,16 l32,32 m-32,0 l32,-32" style="fill:#none;stroke:#000;stroke-width:12;stroke-linecap:round;stroke-linejoin:miter;" />
  </symbol>
  <symbol id="mam-svg-radio4-off" viewBox="0 0 64 64">
    <path d="M4,32 a28,28 0,0,0 56,0 a28,28 0,0,0 -56,0 z" style="fill:#fff;stroke:#999;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
  </symbol>
</svg>

<p>SVGアイコンを使ったオリジナル ラジオボタン１</p>
<div class="fontsize24px">
  <label>
    <input type="radio" class="mam-svg-radio" value="1" name="radio1" checked />
    <svg viewBox="0 0 64 64" class="mam-svg-radio-on" role="img" aria-labelledby="mam-svg-radio1-on-title">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mam-svg-radio1-on"></use>
    </svg>
    <svg viewBox="0 0 64 64" class="mam-svg-radio-off" role="img" aria-labelledby="mam-svg-radio1-off-title">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mam-svg-radio1-off"></use>
    </svg>
    <span class="mam-svg-radio-text">選択肢１</span>
  </label>
  <label>
    <input type="radio" class="mam-svg-radio" value="2" name="radio1" />
    <svg viewBox="0 0 64 64" class="mam-svg-radio-on" role="img" aria-labelledby="mam-svg-radio1-on-title">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mam-svg-radio1-on"></use>
    </svg>
    <svg viewBox="0 0 64 64" class="mam-svg-radio-off" role="img" aria-labelledby="mam-svg-radio1-off-title">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mam-svg-radio1-off"></use>
    </svg>
    <span class="mam-svg-radio-text">選択肢２</span>
  </label>
</div>

<p>SVGアイコンを使ったオリジナル ラジオボタン２</p>
<div class="fontsize24px">
  <label>
    <input type="radio" class="mam-svg-radio" value="1" name="radio2" checked />
    <svg viewBox="0 0 64 64" class="mam-svg-radio-on" role="img">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mam-svg-radio2-on"></use>
    </svg>
    <svg viewBox="0 0 64 64" class="mam-svg-radio-off" role="img">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mam-svg-radio2-off"></use>
    </svg>
    <span class="mam-svg-radio-text">選択肢１</span>
  </label>
  <label>
    <input type="radio" class="mam-svg-radio" value="2" name="radio2" />
    <svg viewBox="0 0 64 64" class="mam-svg-radio-on" role="img">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mam-svg-radio2-on"></use>
    </svg>
    <svg viewBox="0 0 64 64" class="mam-svg-radio-off" role="img">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mam-svg-radio2-off"></use>
    </svg>
    <span class="mam-svg-radio-text">選択肢２</span>
  </label>
</div>

<p>SVGアイコンを使ったオリジナル ラジオボタン３</p>
<div class="fontsize24px">
  <label>
    <input type="radio" class="mam-svg-radio" value="1" name="radio3" checked />
    <svg viewBox="0 0 64 64" class="mam-svg-radio-on" role="img">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mam-svg-radio3-on"></use>
    </svg>
    <svg viewBox="0 0 64 64" class="mam-svg-radio-off" role="img">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mam-svg-radio3-off"></use>
    </svg>
    <span class="mam-svg-radio-text">選択肢１</span>
  </label>
  <label>
    <input type="radio" class="mam-svg-radio" value="2" name="radio3" />
    <svg viewBox="0 0 64 64" class="mam-svg-radio-on" role="img">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mam-svg-radio3-on"></use>
    </svg>
    <svg viewBox="0 0 64 64" class="mam-svg-radio-off" role="img">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mam-svg-radio3-off"></use>
    </svg>
    <span class="mam-svg-radio-text">選択肢２</span>
  </label>
</div>

<p>SVGアイコンを使ったオリジナル ラジオボタン４</p>
<div class="fontsize24px">
  <label>
    <input type="radio" class="mam-svg-radio" value="1" name="radio4" checked />
    <svg viewBox="0 0 64 64" class="mam-svg-radio-on" role="img">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mam-svg-radio4-on"></use>
    </svg>
    <svg viewBox="0 0 64 64" class="mam-svg-radio-off" role="img">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mam-svg-radio4-off"></use>
    </svg>
    <span class="mam-svg-radio-text">選択肢１</span>
  </label>
  <label>
    <input type="radio" class="mam-svg-radio" value="2" name="radio4" />
    <svg viewBox="0 0 64 64" class="mam-svg-radio-on" role="img">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mam-svg-radio4-on"></use>
    </svg>
    <svg viewBox="0 0 64 64" class="mam-svg-radio-off" role="img">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mam-svg-radio4-off"></use>
    </svg>
    <span class="mam-svg-radio-text">選択肢２</span>
  </label>
</div>