Мне нужна помощь по поводу того, что сводит меня с ума, хахаха. Итак, у меня есть следующие флажки:
Итак, у меня есть такой дизайн, который мой коллега по UX & UI сделал для этого проекта, мне нужно что-то похожее на это:
Как вы можете видеть на изображении выше, мне нужно реализовать что-то, где нет флажков, и в данный момент я выбираю значок, синий цвет которого должен отображаться на границе как пользователь знает, что опция была выбрана.
Ресурс, который я использую для этого, является материализованным CSS флажками, а мой текущий CSS следующий:
/*Checkboxes*/
[type="checkbox"]:checked + span:not(.lever):before {
top: -4px;
left: -5px;
width: 12px;
height: 22px;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid #2372bd;
border-bottom: 2px solid #2372bd;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
/*Checkboxes*/
[type="checkbox"] + span:not(.lever):before, [type="checkbox"]:not(.filled-in) + span:not(.lever):after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 18px;
z-index: 0;
border: 2px solid #888888;
border-radius: 1px;
margin-top: 3px;
-webkit-transition: .2s;
transition: .2s;
}
//This are the current circles that wrapps the icons
.services-circle{
border: 1px solid #858585;
width: 45px;
margin-top: 10px;
margin-bottom: 20px;
height: 45px;
border-radius: 50%;
}
//Current HTML
<label>
<div class="services-circle center-align">
<i class="material-icons-two-tone px32 no-margin-top-bottom">fireplace</i>
<input name="property[services_attributes][0][gas]" type="hidden" value="0"><input
type="checkbox" value="1" name="property[services_attributes][0][gas]"
id="property_services_attributes_0_gas">
<span for="gas">Gas</span>
</div>
</label>
ПРИМЕЧАНИЕ. Если я выберу значок или кружок он отмечен флажком, так что я думаю, это здорово
Итак, есть ли какой-нибудь крутой ресурс в потерянном inte rnet, чтобы сделать что-то подобное? Или если у вас есть какой-нибудь базовый код, который подталкивает меня к достижению чего-то подобного, это было бы здорово! Буду признателен за вашу помощь!