- Posts: 3
- Thank you received: 0
Ask the community, share ideas, and connect with other LimeSurvey users!
.radio-item label:before { content: " "; display: inline-block; position: relative; top: 3px; margin: 0 5px 0 0; width: 20px; height: 20px; border-radius: 11px; border: 2px solid #fff; background-color: transparent; } .radio-item label::after { left: 29px; } .radio-item input[type=radio]:checked + label:after { border-radius: 11px; width: 12px; height: 12px; position: absolute; top: 7px; left: 29px; content: " "; display: block; background: #fff; }
.container ul{ list-style: none; margin: 0; padding: 0; overflow: auto; } ul li{ color: #AAAAAA; display: block; position: relative; float: left; width: 100%; height: 50px; } ul li input[type=radio]{ position: absolute; visibility: hidden; } ul li label{ display: block; position: relative; font-weight: 300; font-size: 1.35em; margin: 10px auto; height: 30px; z-index: 9; cursor: pointer; -webkit-transition: all 0.25s linear; } ul li:hover label{ color: #FFFFFF; } ul li .check{ display: block; position: absolute; border: 5px solid #AAAAAA; border-radius: 100%; height: 25px; width: 25px; top: 30px; left: 20px; z-index: 5; transition: border .25s linear; -webkit-transition: border .25s linear; } ul li:hover .check { border: 5px solid #FFFFFF; } ul li .check::before { display: block; position: absolute; content: ''; border-radius: 100%; height: 15px; width: 15px; top: 5px; left: 5px; margin: auto; transition: background 0.25s linear; -webkit-transition: background 0.25s linear; } input[type=radio]:checked ~ .check { border: 5px solid #0DFF92; } input[type=radio]:checked ~ .check::before{ background: #0DFF92; } input[type=radio]:checked ~ label{ color: #fff; }