如何在css中设置单选按钮的样式

伙计们，我正在创建类似这样的单选按钮参见图片你能指导我如何设计无线电天线的样式，以及如何画出连接它们的线吗。谢谢大家。这是为我的网站，我想做同样的工作。我发现只有这个问题，再次感谢。欢迎所有建议

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

您将不得不使用多种技术的组合。我建议将输入放置在标签内的方式：

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

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

在那里，您可以使用w3schools 上描述的:before和:after伪类来设置单选按钮本身的样式

对于行本身，您可以在标签本身上再次使用一个:before伪类，它只有一个背景或边界，类似于以下内容：

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

当然，你必须计算出顶部与单选按钮很好地对齐。

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

相关内容

最新更新

热门标签：