Добрый день, вот мучаюсь над такой задачей
Нужно сделать рамку вокруг радиокнопок dashed, а при выборе или наведении была solid. Рамка 4 px. Но когда даешь каждой радиокнопке эту рамку, то соответственно по правой и нижней стороне уже не 4 px, а 8 px. В общем пробовал разными способами, но никак не могу додумать как сделать такое как на картинке.
Вот разметка:
<!--Обертка центральных и нижних кнопок -->
<div class="middle-radio-buttons">
<!--Обертка для первого ряда центральных кнопок -->
<div class="choice-wrap">
<div class="middle-input-wrap">
<input id="input1" type="radio" name="choice" />
<label for="input1"><img src="images/letters.png"><span>Детсад</span></label>
</div>
<div class="middle-input-wrap">
<input id="input2" type="radio" name="choice" />
<label for="input2">1</label>
</div>
<div class="middle-input-wrap">
<input id="input3" type="radio" name="choice" />
<label for="input3">2</label>
</div>
<div class="middle-input-wrap">
<input id="input4" type="radio" name="choice" />
<label for="input4">3</label>
</div>
<div class="middle-input-wrap">
<input id="input5" type="radio" name="choice" />
<label for="input5">4</label>
</div>
<div class="middle-input-wrap">
<input id="input6" type="radio" name="choice" />
<label for="input6">5</label>
</div>
<div class="middle-input-wrap">
<input id="input7" type="radio" name="choice" />
<label for="input7">6</label>
</div>
</div>
<!--Обертка для второго ряда центральных кнопок -->
<div class="choice-wrap">
<div class="middle-input-wrap">
<input id="input8" type="radio" name="choice" />
<label for="input8">7</label>
</div >
<div class="middle-input-wrap">
<input id="input9" type="radio" name="choice" />
<label for="input9">8</label>
</div>
<div class="middle-input-wrap">
<input id="input10" type="radio" name="choice" />
<label for="input10">9</label>
</div>
<div class="middle-input-wrap">
<input id="input11" type="radio" name="choice" />
<label for="input11">10</label>
</div>
<div class="middle-input-wrap">
<input id="input12" type="radio" name="choice" />
<label for="input12">11</label>
</div>
<div class="middle-input-wrap">
<input id="input13" type="radio" name="choice" />
<label for="input13"><img src="images/university.png"><span>Универ</span></label>
</div>
</div>
Вот стили:
/*Обертка группы центральных чекбоксов-------------*/
.choice-wrap{
overflow: hidden;
max-width: 738px;
}
.choice-wrap .middle-input-wrap label{
border-bottom: none;
}
.choice-wrap:nth-child(2) .middle-input-wrap label{
width: 117px;
}
.choice-wrap:nth-child(2) .middle-input-wrap:first-child label{
width: 121px;
}
/*Стили центральных чекбоксов-------------*/
.middle-input-wrap{
float: left;
}
.middle-input-wrap input{
position: absolute;
left: -9999px;
}
.middle-input-wrap label {
display: block;
padding-top: 10px;
cursor: pointer;
width: 99px;
font-size: 72px;
color: #2b5f3d;
text-align: center;
height: 93px;
border-left: 2px dashed #ce631b;
border-right: 2px dashed #ce631b;
border-top: 4px dashed #ce631b;
}
.middle-input-wrap:first-child label {
width: 103px;
border-left: 4px dashed #ce631b;
}
.middle-input-wrap:last-child label {
border-right: 4px dashed #ce631b;
}
.middle-input-wrap label span{
font-size: 15px;
font-family: OpenSans;
color: #cf631b;
margin-top: -23px;
}
.middle-input-wrap input:checked + label span{
color: #fff;
}
.middle-input-wrap input:checked + label {
background: #c25918 no-repeat;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, .2);
color: #fff;
border-left: 2px solid #ce631b;
border-right: 2px solid #ce631b;
border-top: 4px solid #ce631b;
border-bottom: 2px solid #ce631b;
}
