メニューを選択してください。CSS

Question

メニューの中心にテキストを揃えようとしましたが、機能しませんし、メニュー・シャドウのホバーも機能しません。解決策はありますか？ここ

フィドル：

https://jsfiddle.net/6towqd38/1/

CSS code 

    select { 
    border: 0 none; 
    color: black; 
    background: transparent; 
    font-size: 14px; 
    padding: 6px; 
    width: 100%; 
    *width: 100%; 
    *background: #58B14C; 
} 

#mainselection { 
    overflow: hidden; 
    width: 100%; 
    background: #4CAF50; 
    text-align: center; 
} 

#select:hover { 
    box-shadow: 0 0 20px blue; 
} 

Answer 1

が、これは何が必要ですか？

select { 
 
    border: 0 none; 
 
    color: black; 
 
    background: transparent; 
 
    font-size: 14px; 
 
    padding: 6px; 
 
    width: 100%; 
 
    background: #58B14C; 
 
    text-indent: 50%; 
 
} 
 

 
#mainselection { 
 
    overflow: hidden; 
 
    width: 100%; 
 
    background: #4CAF50; 
 
    text-align: center; 
 
} 
 

 
select:hover { 
 
    text-shadow: 1px 1px red; 
 
    box-shadow:1px 1px red; 
 
}

<div id="mainselection"> 
 
    <select> 
 
    <option>Select options</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    </select> 
 
</div>

Answer 2

select { 
    border: 0 none; 
    color: black; 
    background: transparent; 
    font-size: 14px; 
    padding: 6px; 
    width: 100%; 
    width: 100%; 
    background: #58B14C; 
    text-align: center; 
} 

option {text-align:center;} 

#mainselection { 
    overflow: hidden; 
    width: 100%; 
    background: #4CAF50; 
} 

select:hover { 
    text-shadow: 2px 2px 5px #00ff00; 
    box-shadow: 2px 2px 5px #555555; 
    }