html - 没有使用JavaScript的情况下, 如何只使用CSS <select>下拉列表?

  显示原文与译文双语对照的内容

是否有CSS-only方式来设置 <select> 下拉列表?

我需要尽可能多地使用 <select> 格式,没有任何 JavaScript 。 在CSS中可以使用哪些属性?

这里代码需要与所有主要浏览器兼容:

  • IE 6,7和 8
  • yf_terminology_Firefox@#@#@#Firefox_yf_terminology
  • Safari

我知道我可以用JavaScript制作它: 示例

我不是说简单的造型。 我想知道,我们只能用CSS做什么。

我在堆栈溢出上发现了相似的问题。

并在 Doctype.com. 这个

时间:

这是可能的,但不幸的是,在Webkit-based浏览器的范围内,我们作为开发人员,需要。 下面是通过内置开发人员工具面板从 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-based浏览器中的任何页面上运行这里代码时,它应该更改选择框的外观,删除标准OS-arrow并添加一个 PNG-arrow,在标签前后加上一些间距,几乎所有你需要的内容。

最重要的部分是 appearance 属性,它改变元素的行为。

它在几乎所有的Webkit-based浏览器中都能正常工作,包括移动浏览器,尽管Gecko不支持 appearance,也不支持 web kit 。

<select> 标签可以通过css样式就像其他任何html元素在一个html页面在浏览器中呈现。 下面是一个( 过于简单) 示例,它将在页面上定位选择元素并以蓝色显示选项的文本。

示例HTML文件( selectexample.html ):


<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Select Styling</title>
 <link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
 <option value="yourMom">Your Mom</option>
 <option value="myMom">My Mom</option>
</select>
</body>
</html>

示例CSS文件( selectexample.css ):


/* All select elements on page */
select {
 position: relative;
}

/* Style by class. Effects the text of the contained options. */
.blueText {
 color: #0000FF;
}

/* Style by id. Effects position of the select drop down. */
#styledSelect {
 left: 100px;
}

最大的矛盾我注意到当样式选择下拉是 SafariGoogle Chrome 呈现( Firefox 通过CSS完全可以自定义) 。 在经过一些模糊的互联网深度搜索之后,我遇到了以下问题,这几乎完全消除了我对 web kit的疑虑:

Safari和 Google Chrome 修复:


select
 -webkit-appearance: none;

但是,这将删除下拉箭头。 你可以使用带有背景,负边距或者绝对定位在选择下拉菜单中的附近div添加下拉箭头。

*More 信息和其他变量可在 css属性: -webkit-appearance 。

博客 如何css形式下拉样式没有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>


select {
 outline: 0;
 overflow: hidden;
 height: 30px;
 background: #2c343c;
 color: #747a80;
 border: #2c343c;
 padding: 5px 3px 5px 10px;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 border-radius: 10px;
}

select option {border: 1px solid #000; background: #010;}

是。你可以通过标记名称来样式化任何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>

使用 clip 属性裁剪 select 元素的边框和箭头,然后将你自己的替换样式添加到包装器:


<!DOCTYPE html>
<html>
 <head>
 <style>
 select { position: absolute; clip:rect(2px 49px 19px 2px); z-index:2; }
 body> span { display:block; position: relative; width: 64px; height: 21px; border: 2px solid green; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
 </style>
 </head>
 <span>
 <select>
 <option value="">Alpha</option>
 <option value="">Beta</option>
 <option value="">Charlie</option>
 </select>
 </span>
</html>

使用带有零透明度的第二个选择可以使按钮可以单击:


<!DOCTYPE html>
<html>
 <head>
 <style>
 #real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; }
 #fake { position: absolute; opacity: 0; }

 body> span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
 </style>
 </head>
 <span>
 <select id="real">
 <option value="">Alpha</option>
 <option value="">Beta</option>
 <option value="">Charlie</option>
 </select>
 <select id="fake">
 <option value="">Alpha</option>
 <option value="">Beta</option>
 <option value="">Charlie</option>
 </select>
 </span>
</html>

web kit和其他浏览器之间的坐标不同,但是 @media 查询可以覆盖。

...