如何在 CSS 中设置单选按钮的样式？答案

【问题标题】：how to style radio buttons in css?如何在 CSS 中设置单选按钮的样式？
【发布时间】：2020-03-06 16:42:29
【问题描述】：

伙计们，我正在创建像这样的单选按钮 see image 您能否指导我如何设计单选按钮的样式以及如何绘制连接它们的线。谢谢你们。这是我的网站，我想做同样的工作。我只发现这个问题再次感谢你。欢迎所有建议

/* background of dog photo */
.sizeVisual-image {
  background-color: #00263e;;
}

/* hover label text */
ul li:hover label {
  color: #f2a900;
}

/* click on the label */
input[type=radio]:checked ~ label {
  color: #f2a900;
}

/* box horizental*/
.radioGroup {
  display: flex;
  background-color: #00263e
}

<body>

<!-- INSERT IMAGE  -->
<div class="sizeVisual-image">
  <img class="img img_larger" src="//cdn.shopify.com/s/files/1/1577/4333/files/Fit-Guide-Measurement-Girth.svg?v=3289972504356902595" width="400" height="300" alt="">
</div>
<!-- END INSERT IMAGE  -->


<!-- creation ratio btn set for size options -->
<fieldset>

  <legend class="isVisuallyHidden">Select Size</legend> <!-- title of the btn set -->
  <ul class="radioGroup radioGroup_scale"> <!--creation of btn list -->

    <!-- CREATION OF XXSMALL btn -->
    <li>
      <input type="radio" name="size" id="xxsmall" value="XXSmall" class="radio-input isVisuallyHidden js-product-size" checked="">
      <label class="radio radio_size" for="xxsmall">
        <span class="radio-inner_size"><span></span></span>
        <div class="set">
          <div #FF0000class="set-hd">
            <div class="radio-text_size">
              XXSmall
            </div>
          </div>
          <div class="set-bd">
            <div class="radio-text_size isHiddenTablet">
              13-17 in (33-43 cm)
            </div>
          </div>
        </div>
      </label>
    </li>
    <!-- END OF  XXSMALL btn -->

    <!-- CREATION OF XSMALL btn -->
    <li>
      <input type="radio" name="size" id="xsmall" value="XSmall" class="radio-input isVisuallyHidden js-product-size">
      <label class="radio radio_size" for="xsmall">
        <span class="radio-inner_size"><span></span></span>
        <div class="set">
          <div class="set-hd">
            <div class="radio-text_size">
              XSmall
            </div>
          </div>
          <div class="set-bd">
            <div class="radio-text_size isHiddenTablet">
              17-22 in (43-56 cm)
            </div>
          </div>
        </div>
      </label>
    </li>
    <!-- END OF XSMALL btn -->

    <!-- creation of SMALL btn -->
    <li>
      <input type="radio" name="size" id="small" value="Small" class="radio-input isVisuallyHidden js-product-size">
      <label class="radio radio_size" for="small">
        <span class="radio-inner_size"><span></span></span>
        <div class="set">
          <div class="set-hd">
            <div class="radio-text_size">
              Small
            </div>
          </div>
          <div class="set-bd">
            <div class="radio-text_size isHiddenTablet">
              22-27 in ( 56-69 cm)
            </div>
          </div>
        </div>
      </label>
    </li>
    <!-- END of SMALL btn -->

    <!-- CREATION OF MEDIUM btn -->
    <li>
      <input type="radio" name="size" id="medium" value="Medium" class="radio-input isVisuallyHidden js-product-size">
      <label class="radio radio_size" for="medium">
        <span class="radio-inner_size"><span></span></span>
        <div class="set">
          <div class="set-hd">
            <div class="radio-text_size">
              Medium
            </div>
          </div>
          <div class="set-bd">
            <div class="radio-text_size isHiddenTablet">
              27-32 in (69-81 cm)
            </div>
          </div>
        </div>
      </label>
    </li>
    <!-- END OF MEDIUM btn -->

    <!-- CREATION OF XLARGE btn -->
    <li>
      <input type="radio" name="size" id="large-xlarge" value="Large/XLarge" class="radio-input isVisuallyHidden js-product-size">
      <label class="radio radio_size" for="large-xlarge">
        <span class="radio-inner_size"><span></span></span>
        <div class="set">
          <div class="set-hd">
            <div class="radio-text_size">
              Large/XLarge
            </div>
          </div>
          <div class="set-bd">
            <div class="radio-text_size isHiddenTablet">
              32-42 in (81-107 cm)
            </div>
          </div>
        </div>
      </label>
    </li>
    <!-- END OF XLARGE btn -->
  </ul>
</fieldset>
<!-- end ratio btn set for size options -->

</body>

【问题讨论】：

欢迎来到 Stackoverflow。你可能想检查w3schools.com/howto/howto_css_custom_checkbox.asp
查看此链接：stackoverflow.com/questions/24407461/…
这能回答你的问题吗？ Why does radiobutton CSS-styling behave opposite to checkbox?

标签： css

【解决方案1】：

您将不得不使用多种技术组合。我建议顺便把输入放在标签内：

<label>
  <input type="checkbox">
  <div>{ label stuff }</div>
</label>

这将使标记更容易，并且还具有一些可访问性优势。

您可以从那里使用:before 和:after 伪类设置单选按钮本身的样式，如here on w3schools 所述

对于线条本身，您可以在标签本身上再次使用 :before 伪类，仅带有背景或边框，如下所示：

label {
  position: relative;
}

label:before {
  border: 2px solid white;
  content: '';
  height: 0;
  left: 0;
  position: absolute;
  top: 20px;
  width: 100%;  
}

当然，您必须计算顶部才能很好地与单选按钮保持一致。

注意：我可能遗漏了一些细节，但这应该为您指明正确的方向，让您自己设法做到这一点。

【讨论】：

组合得很好