css text-shadow clipping in select tag

Question

Я пытаюсь стилизовать меню с помощью CSS, и у меня возникла проблема с отсечением текста-тени в раскрывающемся списке. Сам текст, кажется, обрезается внутри границ выбора, что удивительно, потому что я бы подумал, что ему будет разрешено распространяться в заполненную область.

html, 
 
    body { 
 
     font-family: Calibri; 
 
     margin: 0px; 
 
     width: 100%; 
 
     height: 100%; 
 
     text-align: center; 
 
     overflow: hidden; 
 
     cursor: default; 
 
    } 
 

 
    #dropdown_user_select{ 
 
     position: absolute; 
 
     left: 25px; 
 
     top: 25px; 
 
    } 
 

 
    select { 
 
     background: none; 
 
     border: 1px solid; 
 
     border-radius: 2px; 
 
     box-shadow: 0px 0px 8px 0px #555, 0px 0px 25px 0px #555 inset; 
 
     text-shadow: 0px 0px 10px #555; 
 
     text-align: center; 
 
     transition: 0.4s all ease-out; 
 
     font-size: 25px; 
 
     padding: 10px 10px 10px 30px; 
 
     cursor: auto; 
 
     -webkit-appearance: none; 
 
     background: #DDD; 
 
     overflow: visible; 
 
    } 
 

 
    .cutoff { 
 
     overflow: visible; 
 
    } 
 

 
    #arrow_down { 
 
     /* a customised arrow on the left of the dropdown */ 
 
     border-width: 15px 10px 0px 10px; 
 
     border-color: #000 transparent transparent transparent; 
 
     position: absolute; 
 
     left: 30px; 
 
     top: 45px; 
 
    }

<div class="cutoff"> 
 
    <select id="dropdown_user_select"> 
 
     <option value="ADMIN">ADMIN</option> 
 
     <option value="username">username</option> 
 
    </select> 
 
</div> 
 
<div id="arrow_down" class="arrow_pointer"></div>

, как вы можете видеть, я попытался использовать DIV с переполнением: видимым, чтобы исправить это, но это не сработало.

EDIT

стрижкой, я имею в виду текст-тень обрывается внутри тега. Вот пример, который показывает, что это лучше, чем выше:

html, 
 
    body { 
 
     font-family: Calibri; 
 
     margin: 0px; 
 
     width: 100%; 
 
     height: 100%; 
 
     text-align: center; 
 
     overflow: hidden; 
 
    } 
 

 
    #dropdown_user_select{ 
 
     position: absolute; 
 
     left: 25px; 
 
     top: 25px; 
 
    } 
 

 
    select { 
 
     border: 1px solid; 
 
     border-radius: 2px; 
 
     text-shadow: 0px 0px 10px #F00; 
 
     font-size: 25px; 
 
     padding: 10px 10px 10px 30px; 
 
     -webkit-appearance: none; 
 
     background: #FFF; 
 
     overflow: visible; 
 
    }

<select id="dropdown_user_select"> 
 
    <option value="ADMIN">ADMIN</option> 
 
    <option value="username">username</option> 
 
</select>

Answer 1

Возможно, проблема заключается в том, что тег <option> не может иметь прокладку, и тот, который установлен на select, фактически выталкивает левый край параметров, отключая тень.

Использование некоторых обманных функций, похоже, работает на Chrome, но не проверено на других браузерах, хотя я предполагаю, что все в порядке.

text-indent исправляет левую тень, а line-height фиксирует вертикальные тени.

select { 
 
    border: 1px solid; 
 
    border-radius: 2px; 
 
    text-shadow: 0px 0px 20px #F00; /* increased to test vertical cut */ 
 
    text-indent: 20px; /* fix the left shadow */ 
 
    line-height: 40px; /* fix the top/bottom shadows */ 
 
    font-size: 25px; 
 
    padding: 10px 10px 10px 0; /* removed left padding to compensate with indent */ 
 
    -webkit-appearance: none; 
 
    background: #FFF; 
 
    overflow: visible; 
 
}

<select id="dropdown_user_select"> 
 
    <option value="ADMIN">ADMIN</option> 
 
    <option value="username">username</option> 
 
</select>

Answer 2

Это трудно понять, что именно вы пытаетесь достичь, но если я правильно прочитал, текст внутри отсечения за пределами границ для вас. Кроме того, я не был уверен, что вы имели в виду тени ... вот JSfiddle:

html, body { 
 
    font-family: Calibri; 
 
    margin: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    cursor: default; 
 
} 
 

 
#dropdown_user_select{ 
 
    position: absolute; 
 
    left: 25px; 
 
    top: 25px; 
 
} 
 

 
select { 
 
    background: none; 
 
    border: 1px solid; 
 
    border-radius: 2px; 
 
    box-shadow: 0px 0px 8px 0px #555, 0px 0px 25px 0px #555; 
 
    text-shadow: 0px 0px 10px #555; 
 
    text-align: center; 
 
    transition: 0.4s all ease-out; 
 
    font-size: 25px; 
 
    padding: 10px 15px 10px 25px; 
 
    cursor: auto; 
 
    -webkit-appearance: none; 
 
    background: #DDD; 
 
    overflow: visible; 
 
} 
 

 
.cutoff { 
 
    overflow: hidden; 
 
} 
 

 
#arrow_down { 
 
    /* a customised arrow on the left of the dropdown */ 
 
    border-width: 15px 10px 0px 10px; 
 
    border-color: #000 transparent transparent transparent; 
 
    position: absolute; 
 
    left: 30px; 
 
    top: 45px; 
 
}

<div class="cutoff"> 
 
    <select id="dropdown_user_select"> 
 
    <option value="ADMIN">ADMIN</option> 
 
    <option value="username">username</option> 
 
    </select> 
 
</div> 
 
<div id="arrow_down" class="arrow_pointer"></div>

Я редактировал значение overflow в .cutoff и забрал inset из вашей коробки тени в select , Я также отредактировал ваши значения дополнений, чтобы они соответствовали ширине стрелки вниз. Не уверен, что это было то, что происходило, но я надеюсь, что помог.

Если это не так, пожалуйста, объясните мне, что произошло, и я могу попытаться помочь.