CSS3单选按钮定制

Question

我的任务是制作一个切换范围（ascendent或descendent）。第一个电台选择是 Ascendent ，第二个 - 后代。我将精灵文件用于活动，悬停或选定的案例。

如何删除输入圈？

如果我选择.sort-toggle input[type="radio"] - display:none;我看不到切换。

.sort-toggle {
    margin: 0 0 0 50px;
}

.sort-toggle label {
    display: none;
}

.sort-toggle input[type="radio"] {
    position: relative;
    cursor: pointer;
}

.sort-toggle-up:before {
    content: "";
    position: absolute;
    height: 13px;
    width: 13px;

    background: transparent url("../img/sprite.png") no-repeat;
    background-position: -77px -461px;

    top: -3px;
    left: 0;    
}

.sort-toggle-up:checked:before {
    background-position: -1px -461px;
}

.sort-toggle-up:hover:before {
    background-position: -40px -461px;
}

.sort-toggle-down::before {
    content: "";
    position: absolute;
    height: 13px;
    width: 13px;

    background: transparent url("../img/sprite.png") no-repeat;
    background-position: -77px -429px;

    top: 0;
    left: 0;    
 }

.sort-toggle-down:checked:before {
    background-position: -1px -429px;
}

.sort-toggle-down:hover:before {
    background-position: -40px -429px;
}

<div class="sort-toggle">
    <input class="sort-toggle-up" id="sort-up" type="radio" name="radio-sort" checked>
    <label for="sort-up">Сортировка по возрастанию</label>
    <input class="sort-toggle-down" id="sort-down" type="radio" name="radio-sort">
    <label for="sort-down">Сортировка по убыванию</label>
</div>

Answer 1

在以下内容中进行必要的更改，替换背景等

.sort-toggle {
    margin: 0 0 0 50px;
}

.sort-toggle label {
  position: relative;
  display: inline-block;
  border: 1px solid black;
}

.sort-toggle input[type="radio"] {
    position: relative;
    cursor: pointer;
    visibility: hidden;
}

.sort-toggle input[type="radio"]:checked + .dummy-radio {
        position: absolute;
    height: 13px;
    width: 13px;
    background: red;
    background-position: -77px -461px;
    top: 0px;
    right: 3px;
    z-index: 9; 
}


.sort-toggle-up:checked:before {
    background-position: -1px -461px;
}

.sort-toggle-up:hover:before {
    background-position: -40px -461px;
}


.sort-toggle-down:checked:before {
    background-position: -1px -429px;
}

.sort-toggle-down:hover:before {
    background-position: -40px -429px;
}

<div class="sort-toggle">
    
    
    <label for="sort-up">Сортировка по возрастанию
      <input class="sort-toggle-up" id="sort-up" type="radio" name="radio-sort" checked>
      <span class="dummy-radio"></span>
    </label>
    
    <label for="sort-down">Сортировка по убыванию
      <input class="sort-toggle-down" id="sort-down" type="radio" name="radio-sort">
      <span class="dummy-radio"></span>
    </label>
</div>

Answer 2

我个人建议使用可用的自定义代码，这样您就不必花费更多时间。

以下是表单结构的示例：

<form class="ac-custom ac-checkbox ac-cross">
    <h2>How do you collaboratively administrate empowered markets via plug-and-play networks?</h2>
    <ul>
        <li><input id="cb1" name="cb1" type="checkbox"><label for="cb1">Efficiently unleash information</label></li>
        <li><input id="cb2" name="cb2" type="checkbox"><label for="cb2">Quickly maximize timely deliverables</label></li>
        <li><input id="cb3" name="cb3" type="checkbox"><label for="cb3">Dramatically maintain solutions</label></li>
        <li><input id="cb4" name="cb4" type="checkbox"><label for="cb4">Completely synergize relationships</label></li>
        <li><input id="cb5" name="cb5" type="checkbox"><label for="cb5">Professionally cultivate customer service</label></li>
    </ul>
</form>

使输入不可见并使用伪元素创建框的核心样式如下：

.ac-custom label {
    display: inline-block;
    position: relative;
    font-size: 2em;
    padding: 0 0 0 80px;
    vertical-align: top;
    color: rgba(0,0,0,0.2);
    cursor: pointer;
    transition: color 0.3s;
}

.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"],
.ac-custom label::before {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 0;
    margin-top: -25px;
    position: absolute;
    cursor: pointer;
}

.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"] {
    opacity: 0;
    display: inline-block;
    vertical-align: middle;
    z-index: 100;
}

.ac-custom label::before {
    content: '';
    border: 4px solid #fff;
    transition: opacity 0.3s;
}
.ac-custom input[type="checkbox"]:checked + label,
.ac-custom input[type="radio"]:checked + label {
    color: #fff;
} 

.ac-custom input[type="checkbox"]:checked + label::before,
.ac-custom input[type="radio"]:checked + label::before {
    opacity: 0.8;
}

您可以从来源

获取自定义代码

https://tympanus.net/codrops/2013/10/15/animated-checkboxes-and-radio-buttons-with-svg/

Answer 3

感谢您对我的问题感兴趣。最后我完成了自己。

＆＃13;

＆＃13;

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.sort-toggle input[type="radio"] {
    display: none;
}

.sort-toggle label {
    display: inline-block;
    cursor: pointer;
}

.sort-toggle input[type="radio"] + label.sort-toggle-up svg,
.sort-toggle input[type="radio"] + label.sort-toggle-down svg {
    width: 11px;
    height: 10px;
    fill: #c5c5c5;
}

.sort-toggle input[type="radio"]:checked + label.sort-toggle-up svg,
.sort-toggle input[type="radio"]:checked + label.sort-toggle-down svg {
    fill: red;
}

.sort-toggle input[type="radio"]:hover + label.sort-toggle-up svg,
.sort-toggle input[type="radio"]:hover + label.sort-toggle-down svg {
    fill: black;
}

＆＃13;

<div class="sort-toggle">
  <input type="radio" checked="checked" id="sort-up" name="radio-sort">
  <label for="sort-up" class="sort-toggle-up">
    <span class="visually-hidden">Сортировка по возрастанию</span>
    <svg><polygon points="5.5,0 0,10 11,10 " /></svg>
  </label>

  <input type="radio" id="sort-down" name="radio-sort">
  <label for="sort-down" class="sort-toggle-down">
    <span class="visually-hidden">Сортировка по убыванию</span>
    <svg>
       <polyline points="5.5,10 0,0 11,0 " />
    </svg>  
  </label>
</div>

＆＃13;

＆＃13;

＆＃13;