Привлекательные радиокнопки HTML & CSS
На чтение 1 мин. Просмотров 932 Опубликовано
Обновлено
HTML
<form>
<label>
<input type="radio" name="radio" checked />
<span>HTML</span>
</label>
<label>
<input type="radio" name="radio" />
<span>CSS</span>
</label>
<label>
<input type="radio" name="radio" />
<span>Javascript</span>
</label>
</form>
CSS
form {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
label {
display: -webkit-box;
display: flex;
cursor: pointer;
font-weight: 500;
position: relative;
overflow: hidden;
margin-bottom: 0.375em;
}
label input {
position: absolute;
left: -9999px;
}
label input:checked+span {
background-color: #ebe1eb;
}
label input:checked+span:before {
box-shadow: inset 0 0 0 0.4375em #844685;
}
label span {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
padding: 0.375em 0.75em 0.375em 0.375em;
border-radius: 99em;
-webkit-transition: 0.25s ease;
transition: 0.25s ease;
}
label span:hover {
background-color: #ebe1eb;
}
label span:before {
display: -webkit-box;
display: flex;
flex-shrink: 0;
content: "";
background-color: #fff;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
margin-right: 0.375em;
-webkit-transition: 0.25s ease;
transition: 0.25s ease;
box-shadow: inset 0 0 0 0.125em #844685;
}
Источник
