Пример:
Посмотреть и попробовать на codepen.io
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="r-all"> <span class="r-group"> <input class="r-input" type="radio" name="radioname" id="radio-1" checked /> <label for="radio-1">1.1</label> </span> <span class="r-group"> <input class="r-input" type="radio" name="radioname" id="radio-2" /> <label for="radio-2">1.2</label> </span> <span class="r-group"> <input class="r-input" type="radio" name="radioname" id="radio-3" /> <label for="radio-3">1.3</label> </span> <span class="r-group"> <input class="r-input" type="radio" name="radioname" id="radio-4" /> <label for="radio-4">1.4</label> </span> </div> |
Если необходимо несколько полей с радиокнопками, то html-код для них идентичный .
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 |
.r-all { background: #F6F7F7; border: solid 2px #BFE2FF; border-radius: 10px; position: relative; display: flex; margin: 20px 0; } .r-all .r-group { margin: 10px; width: calc(100% - 20px); display: flex; background: #FFF; border: 1px solid #DDD; border-radius: 10px; transition: background .2s ease; } .r-all .r-group input { opacity: 0; position: absolute; } .r-all .r-group input + label { border-radius: 10px; flex: 1 1 100%; font-size: 20px; font-weight: normal; font-family: 'Roboto', sans-serif; margin: 0; padding: 10px 0; position: relative; text-align: center; z-index: 1; transition: color .4s ease; cursor: pointer; } .r-all::before { background: #337AB7; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2); color: #FFF; content: ""; display: block; height: calc(100% - 20px); position: absolute; top: 10px; left: 10px; transform: translateX(calc((100% + (10px * 2)) * (var(--options-active) - 1))); transition: transform cubic-bezier(0.8, 0.34, 0.28, 1.15) 0.35s; width: calc((100% - ((var(--options)*10px)*2)) / var(--options)); } .r-all .r-group input:checked + label { color: #FFF; } .r-all .r-group:hover { background: #BFE2FF; border: 1px solid #BFE2FF; } |
JS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
let all = document.querySelectorAll('.r-all'); for (let a = 0; a < all.length; a++){ let radios = all[a].querySelectorAll('.r-input'); let i = 1; all[a].style.setProperty('--options',radios.length); radios.forEach((input)=>{ input.setAttribute('data-pos',i); input.addEventListener('click',(e)=>{ all[a].style.setProperty('--options-active',e.target.getAttribute('data-pos')); }); i++; }); }; |
Хорошие кнопки. Мне такие подошли бы, если бы общая высота была 40 px, а как сделать их меньше - непонятно, я весь мозг себе сломал. Только кнопки кривыми сделать получается)
Не понял, они и так высотой 38px или нужно 2 ряда высотой 40px?
.r-all .r-group input + label
Поменяйте padding: 10px 0; на поменьше - они станут уже
Нет, нужен 1 ряд высотой 40px. Они сейчас с рамкой больше 40. У меня стоит select выстой 40px и он меньше раза 2.5 чем эти кнопки с рамкой.
Спасибо за совет. Сейчас попробую. До этого пробовал, что-то как-то не то получалось.
Еще посмотрите margin: 10px (это отступы)
height: calc(100% - 20px); top: 10px; (у активного пункта)
Благодарю за помощь! Вроде разобрался. Надеюсь, что получится))