[Html] 如何在沒有JavaScript的情況下僅使用CSS設置<select>下拉菜單?


Answers

這是可能的,但不幸的是,大多數情況下,我們作為開發人員需要基於Webkit的瀏覽器。 下面是通過內置開發人員工具檢查器從Chrome選項面板收集的CSS樣式示例,該樣式經過改進以匹配大多數現代瀏覽器中當前支持的CSS屬性:

select {
    -webkit-appearance: button;
    -moz-appearance: button;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-padding-end: 20px;
    -moz-padding-end: 20px;
    -webkit-padding-start: 2px;
    -moz-padding-start: 2px;
    background-color: #F07575; /* fallback color if gradients are not supported */
    background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */
    background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Fx (3.6 to 15) */
    background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of IE 10*/
    background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */ 
    background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
    background-position: center right;
    background-repeat: no-repeat;
    border: 1px solid #AAA;
    border-radius: 2px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    color: #555;
    font-size: inherit;
    margin: 0;
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

當您在基於Webkit的瀏覽器中的任何頁面上運行此代碼時,它應該更改選擇框的外觀,刪除標準操作系統箭頭並添加PNG箭頭,在標籤前後放置一些空格,幾乎任何您想要的內容。

最重要的部分是appearance屬性,它改變了元素的行為。

它幾乎適用於所有基於Webkit的瀏覽器,包括移動瀏覽器,儘管Gecko似乎並不像Webkit那樣支持appearance

Question

是否有CSS的唯一方式來設置<select>下拉菜單的樣式?

我需要盡可能人性地設計<select>表單,而不需要任何JavaScript。 我可以在CSS中使用哪些屬性?

此代碼需要與所有主流瀏覽器兼容:

  • Internet Explorer 6,7和8
  • 火狐
  • 蘋果瀏覽器

我知道我可以用JavaScript做到這一點: Example

我不是在談論簡單的造型。 我想知道,我們可以用CSS做什麼最好。

我發現堆棧溢出類似的問題

這個在Doctype.com上。




我有這個確切的問題,除了我不能使用圖像,並不受瀏覽器支持的限制。 這應該是«規格»,並運氣開始工作到處都是。

它使用分層旋轉背景圖層來“剪裁”下拉箭頭,因為偽元素不適用於select元素。 用你最喜歡的顏色替換«hotpink» - 我使用一個變量。

select {
  font: 400 12px/1.3 "Helvetica Neue", sans-serif;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid hotpink;
  line-height: 1;
  outline: 0;
  color: hotpink;
  border-color: hotpink;
  padding: 0.65em 2.5em 0.55em 0.75em;
  border-radius: 3px;
  background: linear-gradient(hotpink, hotpink) no-repeat,
              linear-gradient(-135deg, rgba(255,255,255,0) 50%, white 50%) no-repeat,
              linear-gradient(-225deg, rgba(255,255,255,0) 50%, white 50%) no-repeat,
              linear-gradient(hotpink, hotpink) no-repeat;
  background-color: white;
  background-size: 1px 100%, 20px 20px, 20px 20px, 20px 60%;
  background-position: right 20px center, right bottom, right bottom, right bottom;   
}
<select>
    <option>So many options</option>
    <option>...</option>
</select>




我在選擇下拉式樣時注意到的最大不一致是SafariGoogle Chrome渲染(Firefox可通過CSS完全自定義)。 在通過互聯網的隱蔽深度進行搜索後,我發現了以下內容,這幾乎可以完全解決WebKit的問題:

Safari和Google Chrome修復程序

select {
  -webkit-appearance: none;
}

但是,這會刪除下拉箭頭。 您可以添加一個下拉箭頭,使用附近的背景,負邊距或絕對定位在選擇下拉菜單上。

* CSS屬性中提供了更多信息和其他變量:-webkit-appearance




不推薦編輯這個元素,但是如果你想嘗試它就像其他任何HTML元素一樣。

編輯示例:

/*Edit select*/
select {
    /*css style here*/
}

/*Edit option*/
option {
    /*css style here*/
}

/*Edit selected option*/
/*element  attr    attr value*/
option[selected="selected"] {
    /*css style here*/
}

<select>
    <option >Something #1</option>
    <option selected="selected">Something #2</option>
    <option >Something #3</option>
</select>



博客文章How to CSS form drop down style沒有JavaScript適用於我,但它在Opera失敗了:

select {
    border: 0 none;
    color: #FFFFFF;
    background: transparent;
    font-size: 20px;
    font-weight: bold;
    padding: 2px 10px;
    width: 378px;
    *width: 350px;
    *background: #58B14C;
}

#mainselection {
    overflow: hidden;
    width: 350px;
    -moz-border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    border-radius: 9px 9px 9px 9px;
    box-shadow: 1px 1px 11px #330033;
    background: url("arrow.gif") no-repeat scroll 319px 5px #58B14C;
}

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






這裡有一個基於我最喜歡的討論的解決方案。 這允許直接設計一個元素而不需要任何額外的標記。

適用於IE8 / 9的安全回退IE10 +。 對這些瀏覽器的一個警告是,背景圖像必須放置得足夠小,以隱藏本地擴展控件。

HTML

<select name='options'>
  <option value='option-1'>Option 1</option>
  <option value='option-2'>Option 2</option>
  <option value='option-3'>Option 3</option>
</select>

SCSS

body {
  padding: 4em 40%;
  text-align: center;
}

select {
  $bg-color: lightcyan;
  $text-color: black;
  appearance: none; // using -prefix-free http://leaverou.github.io/prefixfree/
  background: {
    color: $bg-color;
    image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1255/caret--down-15.png");
    position: right;
    repeat: no-repeat;
  }
  border: {
    color: mix($bg-color, black, 80%);
    radius: .2em;
    style: solid;
    width: 1px;
    right-color: mix($bg-color, black, 60%);
    bottom-color: mix($bg-color, black, 60%);
  }
  color: $text-color;
  padding: .33em .5em;
  width: 100%;
}

// Removes default arrow for IE10+
// IE 8/9 get dafault arrow which covers caret image
// as long as caret image is small than and positioned
// behind default arrow
select::-ms-expand {
    display: none;
}

Codepen

http://codepen.io/ralgh/pen/gpgbGx




You can also add a hover style to the dropdown.

select {position:relative; float:left; width:21.4%; height:34px; background:#f9f9e0; border:1px solid #41533f; padding:0px 10px 0px 10px; color:#41533f; margin:-10px 0px 0px 20px; background: transparent; font-size: 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #f9f9e0;}
select:hover {background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #fff;}
<html>
<head>
</head>
<body>
<select name="type" class="select"><option style="color:#41533f;" value="Select option">Select option</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</body>
</html>




label {
    position: relative;
    display: inline-block;
}
select {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 150px;
    outline: none;
    color: black;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: lightblue;
}

這為選擇元素使用背景顏色,我刪除了圖像..




這是一個適用於所有現代瀏覽器的版本。 關鍵是使用appearance:none刪除默認格式。 由於所有的格式都沒有了,所以你必須重新加入箭頭,以便在視覺上區分選擇和輸入。

工作示例: https://jsfiddle.net/gs2q1c7p/https://jsfiddle.net/gs2q1c7p/

select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
    padding: .5em;
    padding-right: 1.5em
}

#mySelect {
    border-radius: 0
}
<select id="mySelect">
    <option>Option 1</option>
    <option>Option 2</option>
</select>




是。 您可以通過其標籤名稱來設置HTML元素的樣式,如下所示:

select {
  font-weight: bold;
}

當然,你也可以像使用其他元素一樣使用CSS類來設計它:

<select class="important">
  <option>Important Option</option>
  <option>Another Important Option</option>
</select>

<style type="text/css">
  .important {
    font-weight: bold;
  }
</style>



Danield的答案( https://.com/a/13968900/280972 )中的第二種方法可以改進以使用懸停效果和其他鼠標事件。 只要確保“button”元素在標記中的select元素之後。 然後使用+ css選擇器來定位它:

HTML:

<select class="select-input">...</select>
<div class="select-button"></div>

CSS:

.select-input:hover+.select-button {
    [hover styles here]
}

但是,這會在懸停在select元素上的任何地方時顯示懸停效果,而不僅僅是在“按鈕”上方。

我將這種方法與Angular結合使用(因為我的項目恰好是Angular-app),以覆蓋整個select元素,並讓Angular在“按鈕”元素中顯示所選選項的文本。 在這種情況下,當懸停在選擇區域上的任何地方時,懸停效果都適用。 It doesn't work without javascript though, so if you want to do this, and your site has to work without javascript, you should make sure that your script adds the elements and classes necessary for the enhancement. That way, a browser without javascript will simply get a normal, unstyled, select, instead of a styled badge that doesn't update correctly.




Links