替换默认select下拉菜单箭头代码实例

快乐打工仔 分类:实例代码

替换默认select下拉菜单箭头代码实例属于前端实例代码,有关更多实例代码大家可以查看

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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元素中,结构如下:

<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元素,然后将箭头设置为此元素的右对齐的背景图片,于是就实现了替换功能。

替换默认select下拉菜单箭头代码实例,这样的场景在实际项目中还是用的比较多的,关于替换默认select下拉菜单箭头代码实例就介绍到这了。

回复

我来回复
  • 暂无回复内容