問題與<select>和：後用WebKit

Question

我想在僞選擇框後添加一些樣式：後（樣式我的選擇框與2部分，沒有圖像）。這裏的HTML：

<select name=""> 
    <option value="">Test</option> 
</select> 

而且它不起作用。我不知道爲什麼，也沒有在W3C規範中找到答案。這是CSS：

select { 
    -webkit-appearance: none; 
    background: black; 
    border: none; 
    border-radius: 0; 
    color: white; 
} 

select:after { 
    content: " "; 
    display: inline-block; 
    width: 24px; height: 24px; 
    background: blue; 
} 

那麼這是正常的還是有一個詭計？

Answer 1

我還沒有對此進行廣泛的檢查，但是由於瀏覽器運行的操作系統生成select元素的方式，我覺得這還沒有（但是？比瀏覽器本身。

Answer 2

面臨同樣的問題。也許這可能是一個解決辦法：

<select id="select-1"> 
    <option>One</option> 
    <option>Two</option> 
    <option>Three</option> 
</select> 
<label for="select-1"></label> 

#select-1 { 
    ... 
} 

#select-1 + label:after { 
    ... 
} 

Answer 3

http://bavotasan.com/2011/style-select-box-using-only-css/

他使用外面的div與解決此問題的一類這個職位可能會有幫助。

<div class="styled-select"> 
    <select> 
    <option>Here is the first option</option> 
    <option>The second option</option> 
    </select> 
</div> 

Answer 4

我一直在尋找同樣的東西，因爲我的選擇背景與箭頭顏色相同。如前所述，在select元素之前或之後添加任何內容是不可能的。我的解決方案是創建一個包裝器元素，我在其中添加了以下內容：在代碼之前。

.select-wrapper { 
    position: relative; 
} 

.select-wrapper:before { 
    content: '\f0d7'; 
    font-family: FontAwesome; 
    color: #fff; 
    display: inline-block; 
    position: absolute; 
    right: 20px; 
    top: 15px; 
    pointer-events: none; 
} 

這我選擇

select { 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    width: 100%; 
    padding: 10px 20px; 
    background: #000; 
    color: #fff; 
    border: none; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
} 

select::-ms-expand { 
    display: none; 
} 

我用FontAwesome.io爲我的新方向，但你可以使用任何你想要的東西。顯然這不是一個完美的解決方案，但取決於你的需求，這可能就足夠了。

Answer 5

該解決方案類似於從sroy的一個，但用CSS三角形的，而不是Web字體：

.select-wrapper { 
 
    position: relative; 
 
    width: 200px; 
 
} 
 
.select-wrapper:after { 
 
    content: ""; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
    border-top: 6px solid #666; 
 
    position: absolute; 
 
    right: 8px; 
 
    top: 8px; 
 
    pointer-events: none; 
 
} 
 
select { 
 
    background: #eee; 
 
    border: 0 !important; 
 
    border-radius: 0; 
 
    -webkit-appearance:none; 
 
    -moz-appearance:none; 
 
    appearance:none; 
 
    text-indent: 0.01px; 
 
    text-overflow: ""; 
 
    font-size: inherit; 
 
    line-height: inherit; 
 
    width: 100%; 
 
} 
 
select::-ms-expand { 
 
    display: none; 
 
}

<div class="select-wrapper"> 
 
    <select> 
 
    <option value="1">option 1</option> 
 
    <option value="2">option 2</option> 
 
    <option value="3">option 3</option> 
 
    </select> 
 
</div>

Answer 6

這是一個現代化的解決方案，我熟了使用font-awesome。爲簡潔起見，供應商擴展已被省略。

HTML

<fieldset> 
    <label for="color">Select Color</label> 
    <div class="select-wrapper"> 
     <select id="color"> 
      <option>Red</option> 
      <option>Blue</option> 
      <option>Yellow</option> 
     </select> 
     <i class="fa fa-chevron-down"></i> 
    </div> 
</fieldset> 

SCSS

fieldset { 
    .select-wrapper { 
     position: relative; 

     select { 
      appearance: none; 
      position: relative; 
      z-index: 1; 
      background: transparent; 

      + i { 
       position: absolute; 
       top: 40%; 
       right: 15px; 
      } 
     } 
    } 

如果您選擇元素有一個定義的背景顏色，那麼這將無法工作，因爲這基本上片段放在背後的雪佛龍圖標選擇元素（以允許單擊圖標頂部仍然啓動選擇操作）。

但是，您可以將select-wrapper的樣式設置爲與select元素相同的大小並對其背景進行樣式設置以獲得相同的效果。

看看我CodePen的工作演示，顯示上既黑暗與光明的主題選擇使用普通的標籤外，清理風格，如邊界和寬度框和一個「佔位」標籤，這段代碼。

P.S.這是我在今年早些時候發佈給另一個重複問題的答案。

Answer 7

根據我的經驗，這根本行不通，除非你願意將你的<select>包裝在一些包裝中。但是你可以做的是使用背景圖像SVG。例如。

.archive .options select.opt { 
    -moz-appearance: none; 
    -webkit-appearance: none; 
    padding-right: 1.25EM; 
    appearance: none; 
    position: relative; 
    background-color: transparent; 
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='10' fill='gray'%3E%E2%96%BE%3C/text%3E%3C/svg%3E"); 
    background-repeat: no-repeat; 
    background-size: 1.5EM 1EM; 
    background-position: right center; 
    background-clip: border-box; 
    -moz-background-clip: border-box; 
    -webkit-background-clip: border-box; 
} 

    .archive .options select.opt::-ms-expand { 
     display: none; 
    } 

只要注意正確的URL編碼，因爲IE。您必須使用charset=utf8（不僅僅是utf8），不要使用雙引號（「）來定界SVG屬性值，而是使用撇號（'）來簡化您的生活URL編碼s（％3E）。打印任何非ASCII字符，您必須獲得其UTF-8表示形式（例如BabelMap可以幫助您），然後以URL編碼形式提供該表示形式 - 例如▾（U+25BE BLACK DOWN-POINTING SMALL TRIANGLE）UTF- 8代表是\xE2\x96\xBE這是%E2%96%BE當URL編碼。