DIV+CSS标准制作网页表单的select例子

时间:2008-10-06 10:46:59  来源:第二电脑网上收集  作者:

  第二电脑网导读:g: 0;}.select {  border:1px solid #cccccc;  float: left;  display: inline;  }.select div {  border:1px solid #f9f9f9;  float: left;}/* 子选择器,在FF等非IE浏览器中识别 */.select>div {  width:...
  正文: 大家都见过用Css定义的各色的input按钮,但对于select却无法用定义input的简单方式来实现。下面提供另外一种css定义的方式来让你的select炫起来。

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
}

XHTML部分:
<div class="select">
 <div>
 <select>
  <option>网页教学网</option>
  <option>网页教学网</option>
  <option>网页教学网</option>
 </select>
 </div>
</div>

DIV+CSS标准制作网页表单的select例子》由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Page/css/2008-10-06/1981.html


关键字:

关于《DIV+CSS标准制作网页表单的select例子》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td