CSS3 radio button customization - html

Question

My task is to make a toggle range (ascendent or descendent). First radio selection is Ascendent and the second - Descendent. I use sprite file for active, hover or selected case.
How can I remove the Input circles?
If I put for .sort-toggle input[type="radio"] - display:none; I can not see the toggle.
.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

Make necessary changes in the following, replace the background, etc
.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

i would personally suggest to use available custom codes so you have not to spent more time on it.
Here is an example of a form structure:
<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>
The core styles for making the input invisible and creating the box out of the pseudo-element is the following:
.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;
}
You can get custom codes from Source
https://tympanus.net/codrops/2013/10/15/animated-checkboxes-and-radio-buttons-with-svg/

Answer 3

Thanks for Your interest of my problem. At last I finished by my self.
.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>