时间戳

首页 > 解决方案 > 自定义单选按钮

html - 自定义单选按钮

问题描述

我正在尝试自定义一些单选按钮。我想自定义标签以使 is 作为一个可点击的按钮，如下图： 在此处输入图像描述

此外，我在悬停时引入了新标签按钮的更改颜色，并在聚焦时引入了另一种颜色，如下图所示： 在此处输入图像描述 在此处输入图像描述

最后我想隐藏典型的圆形按钮作为这个结果： 在此处输入图像描述

我有两个主要问题：

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技巧来解决我的问题

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

标签： htmlcssradio-button

解决方案

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

推荐阅读