Как сверстать такой border?

Добрый день, вот мучаюсь над такой задачей
ddda2a4824944894b14503b5d1a0ffbf.png
Нужно сделать рамку вокруг радиокнопок 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;
}
  • Вопрос задан
  • 933 просмотра
Решения вопроса 1
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Достаточно просто реализуется такая схема.
Для кроссбраузерности display:table и отрицательный margin.

Если нужна поддержка IE8, потребуется скриптом выставлять класс (например, для label), поскольку он не понимает псевдокласс :checked. Всё остальное он сформирует нормально без лишних телодвижений.
Делается это вот так.
Ответ написан
Пригласить эксперта
Ответы на вопрос 6
IonDen
@IonDen
JavaScript developer. IonDen.com
Не парьтесь вы так, видно же, что контент жутко навороченный, кастомный, повторить на CSS не реально, по этому делается все проще. Вся иллюстрация делается фоновой картинкой, а кнопочки поверх с абсолютным позиционированием.
Ответ написан
chlp
@chlp
фулстек
Нужно отказаться от идеи делить ширину border'ов пополам и идти другим путем: каждый not-first div имеет нулевой левый border, каждый div из второго ряда имеет нулевой верхний border.
Например, так codepen.io/anon/pen/zGwxqL
Ответ написан
@mishapsv
Использовать отрицательный margin и/или :nth-child(n) (т.е. к примеру средним элементам задавать бордер только с двух сторон, а крайним еще и с недостающих).
Ответ написан
Комментировать
@Aborrol
Можно рамку сделать из box-shadow

.middle-input-wrap input:checked + label {
background: #c25918 no-repeat;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, .2), 0px 0px 0px 4px rgba(206,99,27,1);
color: #fff;
border-left: 0px solid #ce631b;
border-right: 0px solid #ce631b;
border-top: 4px solid #ce631b;
border-bottom: 4px solid #ce631b;
}
Ответ написан
Комментировать
loly_girl
@loly_girl
Верстальщица, дизайнер, ретушёр
Комбинируйте border и outline.
Ответ написан
Комментировать
Myibraguim
@Myibraguim
border: 3px dashed rgb(111, 68, 76);
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы