The task is to make the switch sort by outgoing or descending. I use the sprite file to customize the elements. I can not remove round tiles so that only triangles remain. If I set for a class:

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

I can not see the switch:

image description

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

1 answer 1

Thanks for your feedback. In the end, he washed it all himself. The code is working, you can CTRL + C and CTRL + V and everything will work. I do not know how to insert the button Run code at the bottom of my message.

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