Question

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

此外，我在悬停时引入了新标签botton的更改颜色，在聚焦时又引入了另一种颜色，如下图所示：

最后，我想隐藏典型的圆形按钮，结果如下：

我有两个主要问题：

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

添加opacity和position

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

Answer 2

尝试这个

input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
} 
input[type=checkbox]:checked + label {
  color: #f00;
  font-style: normal;
}

<input type="checkbox" id="ossm" name="ossm"> 
<label for="ossm">CSS is Awesome</label>

Answer 3

您可以尝试减小输入的宽度。这可能对您有所帮助。

input {
    width: 0px;
}

自定义单选按钮

3 个答案: