html - CSS3 单选按钮自定义

Question

我的任务是制作一个切换范围(上升或下降)。第一个 radio 选择是 Ascendent，第二个是 Descendent。我将 sprite 文件用于事件、悬停或选定的情况。

如何删除输入圈？

如果我输入 .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>