設置或替換標准選擇元素

Question

我已經進行了很多搜索，但似乎找不到我認為可能是非常簡單的問題的答案。

我想在頁面上設置一個選擇的樣式，以便它基本上是一個綠色的正方形，中間以白色顯示所選的數字（1-20）。

這是我到目前為止的內容：

select
{
    width: 1.2em;
    height: 1.5em;
    background-color: #3CB23C;
    -moz-border-radius: 0.2em;
    border-radius: 0.2em;
    border: 0.06em outset #666;

    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 4em;
}

到目前為止看起來還不錯，但是我無法找到如何刪除箭頭的任何方法，以使其看起來像是帶有數字的普通框。

（還沒等我了解了為什么我不應該這樣做一千個回復...... 我知道了 。我以前!!我不求你告訴我，如果我要我問我怎么做閱讀它們！它是針對移動應用程序的，通過單擊綠色框，然后從結果列表中選擇該號碼，可以選擇一個號碼。很明顯，該框的作用是，因此無需在此處進行可訪問性對話。

我已經讀了很多關於不能很容易地設置選擇樣式和其他表單元素樣式的知識，並且還閱讀了很多類似以下內容的答案：

“您無法設置控件本身的樣式，但是可以使用JavaScript對其進行隱藏，並創建一個JavaScript功能控件以充當下拉列表。選擇一個項目后，它將在下拉列表中選擇該項目。”

但是令人驚訝的是，很少有例子。

那么，有沒有人可以通過某種方式來設置箭頭的樣式，使其“消失”呢？或者，如果不可能僅使用CSS來刪除箭頭，那么有沒有人有很好的例子來說明如何使用Javascript復制這種效果？

謝謝

Answer 1

在wekbit瀏覽器中，您可以使用：

select {
  -webkit-appearance: none;
}

即使在-moz-appearance: none; ，它也無法在ie或Firefox中使用-moz-appearance: none; 或appearance: none;

jsFiddle

---

但是恕我直言，最好采用這種方式：設置自定義元素的樣式並使用jQuery對其進行動畫處理。 然后添加一個包含上述元素的jQuery的隱藏選擇。 它更長一些，但是這樣您就不會有太多的瀏覽器兼容性問題。

Answer 2

@pinouchon的答案對於如何刪除箭頭是正確的。 而且，如果您對下拉部分的默認樣式還可以，則可以節省大量工作（鍵盤使用，可訪問性問題，跨平台行為，mousedown-vs.-click-vs.click並按住，...）。

但是，盡管您可以使用-webkit-appearance / -moz-appearance覆蓋最初顯示的零件的樣式，但是似乎沒有任何方法可以重新設置掉落的零件的樣式。 在這種情況下，您將需要使用JavaScript和插入的HTML元素創建一個偽造的選擇菜單，並希望涵蓋所有上述用例。

我們的團隊已開始使用后一種方法的示例是Felix Nagel的selectmenu jQuery UI插件 。

Answer 3

這里有個小技巧，您可能會如何做。 想法是用owerflow隱藏Arroes：隱藏； div。

<style>
div{
    float:left;
    width:90px;
    height:100px;
    overflow:hidden;
}
select
{
    float:left;
    width: 3.2em;
    height: 1.5em;
    background-color: #3CB23C;
    margin-left:-8px;

    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 4em;
}
</style>
<div>
    <select>
        <optgroup label="Server-side languages">
        <option>21</option>
        <option>22</option>
        </optgroup>
        <optgroup label="Client-side languages">
        <option>23</option>
        <option>25</option>
        </optgroup>
    </select>
</div>