表单中 select 样式

  • Post author:
  • Post category:其他






表单样式,可以依靠CSS来改变外观 边框 底色,但是唯独<select>标签不能依靠简单的对边框 底色进行CSS设置进行实现。这里介绍一个方法,具体代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ”

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

“>

<html xmlns=”

http://www.w3.org/1999/xhtml

“>

<head>

<meta http-equiv=”Content-Type” c />

<title>如何让select的样式也漂亮起来</title>

<style type=”text/css”>

<!–

.select * {


margin: 0;

padding: 0;

}

.select {


border:1px solid #cccccc;

float: left;

display: inline;

}

.select div {


border:1px solid #f9f9f9;

float: left;

}

/* 子选择器,在FF等非IE浏览器中识别 */

.select>div {


width:120px;

height: 17px;

overflow:hidden;

}

/* 通配选择符,只在IE浏览器中识别 */

* html .select div select {


display:block;

float: left;

margin: -2px;

}

.select div>select {


display:block;

width:124px;

float:none;

margin: -2px;

padding: 0px;

}

.select:hover {


border:1px solid #666666; //鼠标移上的效果

}

.select select>option {


text-indent: 2px; //option在FF等非IE浏览器缩进2px

}

–>

</style>

</head>

<body><div class=”select”>

<div>

<select>

<option>看见效果了吧</option>

<option>看见效果了吧</option>

<option>看见效果了吧</option>

</select>

</div>

</div>

</body>

</html>