Untitled
unknown
plain_text
4 years ago
2.1 kB
13
Indexable
<div class="create_event__type">
<div class="radio">
<input id="radio-1" type="radio" name="event__type" value="organization" />
<label for="radio-1">Организация мероприятия</label>
</div>
<div class="radio">
<input id="radio-2" type="radio" name="event__type" value="participation" />
<label for="radio-2">Участие в мероприятии</label>
</div>
<div class="radio">
<input id="radio-3" type="radio" name="event__type" value="victory" />
<label for="radio-3">Победа в конкурсе или соревновании</label>
<select name="place">
<option selected disabled>Место</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
.create_event .create_event__type .radio {
margin-bottom: 18px;
margin-top: 18px;
margin-left: 10px;
}
[type="radio"]:checked,
[type="radio"]:not(:checked) {
position: absolute;
left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 2px solid #b9b9b9;
border-radius: 100%;
background: #E5E5E5;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
content: '';
width: 12px;
height: 12px;
background: #a4273c;
position: absolute;
top: 3px;
left: 3px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
[type="radio"]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
Editor is loading...