首页 > 蚂蚁部落 > 正文

替换默认select下拉菜单箭头代码实例
2017-12-27 09:19:48   来源:   评论:0 点击:

<select>下拉菜单是最为常用的表单元素之一,但是它没人的下拉箭头美观度确实有点影响美观,所以很多网站都不用默认的<select>控件,而是模

<select>下拉菜单是最为常用的表单元素之一,但是它没人的下拉箭头美观度确实有点影响美观,所以很多网站都不用默认的<select>控件,而是模拟实现,具体可以参阅模拟实现select下拉菜单效果一章节,这里就不多介绍了,这里提供一种用纯CSS实现的比较简单的方式,代码如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.select{  width:148px;  height:16px;  background:none;  border:none;}#sleHid{  display:block;  width:123px;  overflow:hidden;}#sleBG{  width:148px;  height:16px;  border: 1px solid #A3938C;  background:url(mytest/jQuery/jiantou.png) #fff no-repeat 131px 0px;  display:block;}</style></head><body><div>  <span id="sleBG">     <span id="sleHid">      <select name="type" class="select">        <option selected="selected">--选择分类--</option>        <option value="1">javascript专区</option>        <option value="2">搜索优化</option>      </select>    </span>   </span></div></body></html>

可以将select下拉菜单默认的箭头给替换掉,下面介绍一下它的实现原理。

实现原理:

基本原理是这样的,首先将select下拉菜单放在一个span元素中,结构如下:

[HTML] 纯文本查看 复制代码运行代码
<span id="sleHid">  <select name="type" class="select">    <option selected="selected">--选择分类--</option>    <option value="1">javascript专区</option>    <option value="2">搜索优化</option>  </select></span>

然后设置span(要使用display:block转换为块级元素,否则无法设置尺寸)的元素的尺寸要小于select下拉菜单,并且采用overflow:hidden,select下拉菜单超出的部分就会被隐藏,恰好select下拉菜单箭头部分就会被隐藏了,然后在sleHid元素的外部再套一个span元素sleBG,此元素的尺寸要超出sleHid元素,然后将箭头设置为此元素的右对齐的背景图片,于是就实现了替换功能。

相关热词搜索:

上一篇:js删除数组中的第一个元素
下一篇:js判断一个元素是否获得焦点

分享到: 收藏
评论排行