尋找HTML5 <select>元素CSS3造型的解決方案：沒有圖片文件，跨瀏覽器兼容

我找了造型的解決方案適用於HTML <select>元素（即Web表單下拉），如下所述：尋找HTML5 <select>元素CSS3造型的解決方案：沒有圖片文件，跨瀏覽器兼容

純HTML5/CSS3實現
沒有在Javascript或其他腳本語言
跨瀏覽器兼容任何依賴（FF /鉻/ Safari瀏覽器/ IE10）

目前我使用下面的CSS3代碼段爲造型元素<select>：

select { 
    font-size:9pt; 
    letter-spacing:0.07em; 
    color:#808080; 
    background:transparent; 
    border: solid 1px #808080; 
    padding:3px; 
    cursor:pointer; 
} 
select option { padding: 1px 5px 1px 3px;} 
select option[selected]{ color:#303030; } 
select option:nth-child(even) { background-color:#e5e5e5; }

樣品實施：here

我想了解其他可用「純CSS3」的造型選項適用於內部按鈕（帶有那個向下的三角形）HTML <select>元素，即它的背景，顏色，邊框，字體屬性等。

來源

2013-05-07 Alex Bell

你的問題到底是什麼？你正在尋找一個造型解決方案... **到什麼**？你到底想要完成什麼，你還沒有完成？ – animuson 2013-05-07 01:47:25

我會發表評論，因爲我的回答不會是一個'真正'的答案：不能做到，在挫折開始之前放棄。造型表單控件是一種戲劇，不能做得比一些基本的重新着色和邊界更好。實現一個基於JS的下拉菜單比基於JS的下拉菜單更快，看起來比CSS更好，至少可以在接下來的幾個瀏覽器版本中使用，而且目前看起來不太可能長時間改善。 – 2013-05-07 01:51:27

@animuson：我想這已經足夠清楚了（請閱讀我文章的最後一句） - 我正在尋找適用於「下拉」按鈕的樣式解決方案，該按鈕是該控件的一部分（即背景，顏色，邊框屬性，字體等）。順便說一句，我發現有趣的解決方案基於單選按鈕控件，用於模仿使用「純CSS3」的下拉功能：link。它工作，但CSS3的一部分是有點冗長。無論如何，這是迄今爲止我發現的最好的一個。 Rgds，AB – 2013-05-08 00:32:13

-2

因此fa r，兩種CSS3解決方案與樣式化SELECT元素相關，提供足夠的自定義級別和整體美感。以下示例演示了這兩種技術;爲了簡單/易讀，HTML5和CSS3部分封裝在一個HTML5文件中。

第一個解決方案實現了放置在下拉按鈕上的自定義圖像;第二個使用Unicode字符（可以是任何）。

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>ADVANCED CSS3 STYLING OF SELECT ELEMENT (DROP-DOWN)</title> 
     <style type="text/css"> 

      /* SELECT W/IMAGE */ 
      select#selectTravelCity 
      { 
       width     : 14em; 
       height     : 3.2em; 
       padding     : 0.2em 0.4em 0.2em 0.4em; 
       vertical-align   : middle; 
       border     : 1px solid #e9e9e9; 
       -moz-border-radius  : 0.2em; 
       -webkit-border-radius : 0.2em; 
       border-radius   : 0.2em; 
       box-shadow    : inset 0 0 3px #a0a0a0; 
       -webkit-appearance  : none; 
       -moz-appearance   : none; 
       appearance    : none; 
       /* sample image from the webinfocentral.com */ 
       background    : url(http://webinfocentral.com/Images/favicon.ico) 95%/10% no-repeat #fdfdfd; 
       font-family    : Arial, Calibri, Tahoma, Verdana; 
       font-size    : 1.1em; 
       color     : #000099; 
       cursor     : pointer; 
      } 
      select#selectTravelCity option 
      { 
       font-size    : 1em; 
       padding     : 0.2em 0.4em 0.2em 0.4em; 
      } 
      select#selectTravelCity option[selected]{ font-weight:bold} 
      select#selectTravelCity option:nth-child(even) { background-color:#f5f5f5; } 
      select#selectTravelCity:hover 
      { 
       color     : #101010; 
       border     : 1px solid #cdcdcd; 
      }  
      select#selectTravelCity:focus {box-shadow: 0 0 2px 1px #404040;} 

      /*SELECT W/DOWN-ARROW*/ 
      select#selectPointOfInterest 
      { 
       width     : 185pt; 
       height     : 40pt; 
       line-height    : 40pt; 
       padding-right   : 20pt; 
       text-indent    : 4pt; 
       text-align    : left; 
       vertical-align   : middle; 
       box-shadow    : inset 0 0 3px #606060; 
       border     : 1px solid #acacac; 
       -moz-border-radius  : 6px; 
       -webkit-border-radius : 6px; 
       border-radius   : 6px; 
       -webkit-appearance  : none; 
       -moz-appearance   : none; 
       appearance    : none; 
       font-family    : Arial, Calibri, Tahoma, Verdana; 
       font-size    : 18pt; 
       font-weight    : 500; 
       color     : #000099; 
       cursor     : pointer; 
       outline     : none; 
      } 
      select#selectPointOfInterest option 
      { 
       padding    : 4px 10px 4px 10px; 
       font-size   : 11pt; 
       font-weight   : normal; 
      } 
      select#selectPointOfInterest option[selected]{ font-weight:bold} 
      select#selectPointOfInterest option:nth-child(even) { background-color:#f5f5f5; } 
      select#selectPointOfInterest:hover {font-weight: 700;} 
      select#selectPointOfInterest:focus {box-shadow: inset 0 0 5px #000099; font-weight: 600;} 

      /*LABEL FOR SELECT*/ 
      label#lblSelect{ position: relative; display: inline-block;} 
      /*DOWNWARD ARROW (25bc)*/ 
      label#lblSelect::after 
      { 
       content     : "\25bc"; 
       position    : absolute; 
       top      : 0; 
       right     : 0; 
       bottom     : 0; 
       width     : 20pt; 
       line-height    : 40pt; 
       vertical-align   : middle; 
       text-align    : center; 
       background    : #000099; 
       color     : #fefefe; 
       -moz-border-radius  : 0 6px 6px 0; 
       -webkit-border-radius : 0 6px 6px 0; 
       border-radius   : 0 6px 6px 0; 
       pointer-events   : none; 
      } 
     </style> 
    </head> 

    <body> 
     <br /> 
     <select id="selectTravelCity" title="Select Travel Destination"> 
      <option>New York City</option> 
      <option>Washington DC</option> 
      <option>Los Angeles</option> 
      <option>Chicago</option> 
      <option>Houston</option> 
      <option>Philadelphia</option> 
      <option>Phoenix</option> 
      <option>San Antonio</option> 
      <option>San Diego</option> 
      <option>Dallas</option> 
      <option>San Jose</option> 
      <option>Austin</option> 
     </select> 
     <br /> 
     <br /> 

     <label id="lblSelect"> 
      <select id="selectPointOfInterest" title="Select points of interest nearby"> 
       <option>caffe</option> 
       <option>food beverage</option> 
       <option>restaurant</option> 
       <option>shopping</option> 
       <option>taxi limo</option> 
       <option>theatre</option> 
       <option>museum</option> 
       <option>computers</option> 
      </select> 
     </label> 
</body> 
</html>

這兩種解決方案都基於使用CSS3僞類的。工作示例可用here。

注意：IE瀏覽器存在一些兼容性問題，但IE將被棄用，因此不應該推薦給任何未來的開發者。

來源

2015-03-27 19:04:37

我已經在我的一個模塊中使用了它。你可以試試這個：

select { 
    background-color:#91EB76; 
    width: 180px; 
    padding: 5px; 
    font-size: 16px; 
    border: 1px solid #ccc; 
    height: 34px; 
}

調整顏色會做的工作適合你[希望]

純HTML5/CSS3實現
沒有在Javascript或其他腳本語言的任何依賴
跨瀏覽器兼容性（FF/Chrome/Safari/IE10）

來源

2013-05-09 06:25:05 Janak

對不起，但它本質上是我的原始文章的縮短版本！您只需爲屬性添加其他值，但它並不構成不同的解決方案。我已經明確說明，我正在尋找內部按鈕CSS3樣式，但仍未實現。無論如何，謝謝你的迴應。 Rgds，AB – 2013-05-09 06:34:17

尋找HTML5 <select>元素CSS3造型的解決方案：沒有圖片文件，跨瀏覽器兼容

回答

相關問題