選択タグのCSSシャドークリッピング

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>

私は.cutoffでoverflow値を編集しselectに離れinsetあなたの箱の影から取りました。下向き矢印の幅に合わせてパディング値を編集しました。それが起こっていたかどうかは分かりませんが、私は助けてくれることを願っています。

何が起こったかわからない場合は、何が起こったのかを私に説明してください。