Красивые радио кнопки в тёмных тонах на CSS3
Стильная вариация оформления радио кнопок на чистом CSS. Будет шикарно смотреться на сайтах в тёмных тонах
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
.container{ display: block; position: relative; margin: 40px auto; height: auto; width: 500px; padding: 20px; } .radios h2 { color: #AAAAAA; } .container ul{ list-style: none; margin: 0; padding: 0; overflow: auto; } .radios ul li{ color: #AAAAAA; display: block; position: relative; float: left; width: 100%; height: 100px; border-bottom: 1px solid #333; } .radios ul li input[type=radio]{ position: absolute; visibility: hidden; } .radios ul li label{ display: block; position: relative; font-weight: 300; font-size: 1.35em; padding: 25px 25px 25px 80px; margin: 10px auto; height: 30px; z-index: 9; cursor: pointer; -webkit-transition: all 0.25s linear; } .radios ul li:hover label{ color: #FFFFFF; } .radios 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; } .radios ul li:hover .check { border: 5px solid #FFFFFF; } .radios 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; } .radios input[type=radio]:checked ~ .check { border: 5px solid #0DFF92; } .radios input[type=radio]:checked ~ .check::before{ background: #0DFF92; } .radios input[type=radio]:checked ~ label{ color: #0DFF92; } |
2#: Следующий код поместите куда-нибудь между тегами <body> и </body>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="container radios"> <h2>Что вы любите больше всего?</h2> <ul> <li> <input type="radio" id="f-option" name="selector"> <label for="f-option">Пиццу</label> <div class="check"></div> </li> <li> <input type="radio" id="s-option" name="selector"> <label for="s-option">Бекон</label> <div class="check"><div class="inside"></div></div> </li> <li> <input type="radio" id="t-option" name="selector"> <label for="t-option">Котиков</label> <div class="check"><div class="inside"></div></div> </li> </ul> </div> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
