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

コピペで使えるCSS＋SVGラジオボタンデザイン集｜選べる4種類のアイコン例

「ラジオボタンの見た目って変えられないの？」「input radioをオシャレにしたい」
そんな方のために、CSS＋SVGで表現できる4種類のラジオボタンデザイン例をご用意しました。

ラジオボタン グループ

選択

<div class="mam-radio-panel">
  <div>選択</div>
  <label>
    <input type="radio" value="1" name="radio0" checked/>選択肢１
  </label>
  <label>
    <input type="radio" value="2" name="radio0"/>選択肢２
  </label>
  <label>
    <input type="radio" value="3" name="radio0"/>選択肢３
  </label>
</div>

<style>
  div.mam-radio-panel{
    display:flex;
    font-size:24px;/* お好みのサイズ */
    align-items:center;
  }
  div.mam-radio-panel>div{
    font-size:1em;
    font-weight:bold;
    margin:0;
    padding:8px;
  }
  div.mam-radio-panel>label{
    background:#8ce;
    margin:0;
    padding:8px;
    border:1px solid #999;
  }
  div.mam-radio-panel>label:nth-of-type(1){
    border-radius:0.4em 0 0 0.4em;
  }
  div.mam-radio-panel>label:nth-last-of-type(1){
    border-radius:0 0.4em 0.4em 0;
  }
  div.mam-radio-panel>label:hover{
    box-shadow:3px 3px 6px 0 rgba(0,0,0, 0.6) inset;
  }
  div.mam-radio-panel>label:has(input[type="radio"]:checked){
    background:#00e;
    color:#fff;
    box-shadow:3px 3px 6px 0 rgba(0,0,0, 0.6) inset;
  }
  div.mam-radio-panel>label>input[type="radio"]{
    display:none;
  }
</style>
オン オフ

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

<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>
<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>

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

<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-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>
<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>

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

<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-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>
<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>

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

<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-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="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>