Как избавиться от рамок по бокам?

Question

[Игорь Агарков]

Привет всем! Я захотел стилизовать селект. Нашел статью на хабрахабре (тыц). Начал переделывать стили, но по бокам остались бордеры, и я не могу от них избавиться. Я убрал вообще все рамки в стилях!

Вот мой код:

<label class="customSelect" placeholder="Выберите ЭПС"> 
    <input type="radio" class="openStateSwitcher" name="payment_system">

    <div>
        <input type="radio" name="payment_system" value="Qiwi" id="customSelect_Qiwi" /> <label for="customSelect_Qiwi" >Qiwi</label> 
        <input type="radio" name="payment_system" value="Payeer" id="customSelect_Payeer" /> <label for="customSelect_Payeer" >Payeer</label>
        <input type="radio" name="payment_system" value="Bitcoin" id="customSelect_Bitcoin" /> <label for="customSelect_Bitcoin" >Bitcoin</label>
    </div>
</label>

/* Selects */
/* General Select */
label.customSelect
{
    display: block;
    position: relative;

    width: 250px;
    height: 35px;

    font-size: 18px;
    font-weight: normal;


    /* border: 1px solid #343434; */
    border: 0;
    border-radius: 0;

    -moz-box-sizing: border-box;
         box-sizing: border-box;
		 
	z-index: 2;
}

label.customSelect:before
{
    content: attr(placeholder);
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    max-width: 100%;
    height: 35px;

    padding-left: 10px;

    text-align: left;
    line-height: 35px;
    white-space: nowrap;

    color: #adadad;

    overflow-x: hidden;

    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

label.customSelect:after
{
    content: "<>";
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
	
	font-family: monospace;
    color: #adadad;

    width: 33px;
    height: 33px;

    text-align: center;
    line-height: 33px;

    background-color: #ffffff;

    /* border-bottom: 1px solid #343434; */
    border: 0;

    -moz-box-sizing: border-box;
         box-sizing: border-box;

    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
}

label.customSelect label
{
    display: inline-block;

    min-width: 100%;
    height: 33px;

    font-size: 18px;
    font-weight: normal;
    line-height: 33px;
    white-space: nowrap;

    padding: 0 10px;

    background-color: #ffffff;

    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

label.customSelect input,
label.customSelect label
{
    display: none;
}

label.customSelect div
{
    min-width: 100%;
    max-height: 500px;

    overflow-x: hidden;
}

label.customSelect input[type="radio"]:checked ~ div
{
    position: absolute;
    top: 35px;
    z-index: 999;

    overflow-y: auto;

    box-shadow: -3px 0 0 #d6d6d6, 3px 0 0 #d6d6d6;
    /* border-top: 1px solid #343434; */
    /* border-bottom: 1px solid #343434; */
    border: 0;
}

label.customSelect input[type="radio"]:checked ~ div > label,
label.customSelect input[type="radio"]:checked + label
{
    display: block;
}

label.customSelect input[type="radio"]:checked ~ div > label:hover
{
    background-color: #ffa834;
}

label.customSelect input[type="radio"]:not(:checked) ~ div > input[type="radio"]:checked + label
{
    position: relative;
    z-index: -1;
}

Ctrl+f5 не помогает. Подумал, что это, возможно, остальные стили проекта все ломают, но на чистой странице с одним селектом и его стилями ничего не меняется. Кто-нибудь с таким встречался? У кого-нибудь есть идеи, что это может быть?

Вот скриншот с выделенными "проблемными областями":


Вот, для сравнения, обычный:


P.s. прошу не критиковать мое решение выбрать именно этот способ кастомизации (имеющейся функциональности мне хватает) и вообще решение кастомизировать селект.

Answer 1

[BB 8]

Убрать box-shadow