您的位置：首页 > 其它

select标签 style设置

2016-03-14 13:50 309 查看

select标签 style设置

如下图所示我要所说的效果：未改变前



可以通过css来改变，从而达到如下效果图，代码附上：



通过CSS来改变

vertical-align:middle;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;


demo附上：

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telphone=no, email=no" />
<title></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 */
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>


结果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航