Untitled
unknown
plain_text
2 years ago
2.1 kB
3
Indexable
Never
<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); }