I'm currently working on styling a menu with CSS, and I've encountered an issue with the text-shadow effect getting clipped inside the dropdown. It's surprising because I expected the text to spread into the padded area within the select borders.
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>Despite trying to use a div with overflow: visible to fix this issue, it hasn't been successful.
UPDATE
When I say clipping, I mean that the text-shadow is being cut off inside the <select> tag. Here's a more illustrative example:
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>