html - 自定义单选按钮

Question

我正在尝试自定义一些单选按钮。我想自定义标签以使其成为可点击的按钮，如下图所示:

此外，我在悬停时引入了新标签按钮的颜色变化，在聚焦时引入了另一种颜色，如下图所示:

最后我想隐藏典型的圆形按钮作为这个结果:

我有两个主要问题:

1) 如果我隐藏输入按钮(例如使用 display:none)，我将无法再选择我想要的单选按钮。

2 ) 当使用 focus-within 属性选中单选按钮时，我介绍了更改颜色，但这并不能满足我的需求。事实上，当我加载页面并且默认选中按钮时，我没有看到任何颜色变化，因为我没有专注于它。

我使用的代码如下:

.form-control {
    line-height: 15px;
    font-size: 13px;
    font-family: 'Oswald', sans-serif;
    border: 0;
    font-weight: 300;
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
    list-style: none;
}

.inline-item {
    display: inline-block;
}

.chip-container .chip-selection label {
    height: 28px;
    padding: 5px 10px 3px 10px;
    border-radius: 14px;
    background-color: white;
    color: #7d7d7d;
    border: #7d7d7d 1px solid;
    cursor: pointer;
    text-transform: none;
}

.chip-container .chip-selection label:hover {
    color: $footer_color;
    background-color: #D1F5FF;
    border: #1b8cab 1px solid;
}


.chip-container .chip-selection label:focus-within {
    color: white;
    background-color: #1b8cab;
    border: #1b8cab 1px solid;
}

<div class="border-short">

  <ul class="form-control chip-container">

     <li class="inline-item chip-selection"><label for="id_0">
     <input type="radio" name="input_th" value="false"  id="id_0" checked="">
        old checkbox</label>
      </li>

      <li class="inline-item chip-selection"><label for="id_1">
      <input type="radio" name="input_th" value="true"  id="id_1">
        new trial checkbox</label>
      </li>

  </ul>

</div>

主要问题是我无法更改 html 结构，并且输入是标签的子项。 我最好不要使用任何 javascript，我想知道是否有一些 CSS 技巧可以解决我的问题

非常感谢谁能帮助我 安德里亚

Answer 1

添加不透明度 & 位置

.chip-container .chip-selection label input{
  position: absolute;
  opacity: 0;
}

.form-control {
    line-height: 15px;
    font-size: 13px;
    font-family: 'Oswald', sans-serif;
    border: 0;
    font-weight: 300;
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
    list-style: none;
}

.inline-item {
    display: inline-block;
}

.chip-container .chip-selection label {
    height: 28px;
    padding: 5px 10px 3px 10px;
    border-radius: 14px;
    background-color: white;
    color: #7d7d7d;
    border: #7d7d7d 1px solid;
    cursor: pointer;
    text-transform: none;
}

.chip-container .chip-selection label:hover {
    color: $footer_color;
    background-color: #D1F5FF;
    border: #1b8cab 1px solid;
}


.chip-container .chip-selection label:focus-within {
    color: white;
    background-color: #1b8cab;
    border: #1b8cab 1px solid;
}
.chip-container .chip-selection label input{
  position: absolute;
  opacity: 0;
}

<div class="border-short">

  <ul class="form-control chip-container">

     <li class="inline-item chip-selection"><label for="id_0">
     <input type="radio" name="input_th" value="false"  id="id_0" checked="">
        old checkbox</label>
      </li>

      <li class="inline-item chip-selection"><label for="id_1">
      <input type="radio" name="input_th" value="true"  id="id_1">
        new trial checkbox</label>
      </li>

  </ul>

</div>