怎样用 CSS + JS 美化网页中的 select 下拉框

JavaScript026

怎样用 CSS + JS 美化网页中的 select 下拉框,第1张

这个可以换种方式实现,首先select的样式每个浏览器都有其默认的样式,需要先去除这些默认样式,其次,select里面的样式诸如箭头,下拉框等等的样式,这里提供一种思路,就是在select的外层添加一个div,对这个div元素设置样式,select元素则是没样式,从而达到一种掩眼法的效果,实现方式如下:

<!-- html 布局 -->

<div id="selectStyle">

 <select id="select">

  <option>option 1</option>

  <option>option 2</option>

  <option>option 3</option>

  <option>option 4</option>

  <option>option 5</option>

 </select>

</div>

首先要去掉 #select 的默认样式:

/* 去掉默认样式,设置新的样式 */

#select{

display:block

width:100%

height:100%

box-sizing:border-box

background:none

border:1px solid #222

outline:none

-webkit-appearance:none

padding:0 5px

line-height:inherit

color:inherit

cursor:default

font-size:14px

position:relative

z-index:3

}

#select option{

color:#222

}

#select option:hover{

color:#fff

}

#select option:checked{

background:#535353

color:#fff 

}

然后在外层div#selectStyle设置自定义样式

#selectStyle{

display:block

margin:0 auto

overflow:hidden

height:30px

width:240px

border-radius:0

background:#535353 url("箭头图片地址") right center no-repeat

background-size:auto 80%

color:#fff

line-height:2

/* 如果不想加图片,

   则可以设置一个自己的三角形样式,

   如下的自定义方式,

   见代码1 */

position:relative

z-index:1

}

/* 代码1 */

#selectStyle:before{

position:absolute

z-index:1

top:50%

right:10px

margin-top:-2.5px

display:block

width:0

height:0

border-style:solid

border-width:5px 5px 0 5px

border-color:#fff transparent transparent transparent

content:""

}

/* 代码1 */

#selectStyle:after{

position:absolute

z-index:1

top:50%

right:10px

margin-top:-3.5px

display:block

width:0

height:0

border-style:solid

border-width:5px 5px 0 5px

border-color:#535353 transparent transparent transparent

content:""

}

以上就是自定义select样式的方法;

同时也可以完全不要select这个元素使用div+css来自定义一个跟select一样效果的下拉框(需要Javascript辅助)。

select属于浏览器内置组件,标准CSS无法调整其样式。

你可以使用div来模拟select。

首先创建一个<div />来模拟下拉框。

<div class="mySelect"></div>

然后在里面加上显示选中值的<div />和模拟三角的<div />以及下拉列表<ul />

<div class="mySelect">

    <div class="mySelectValue"></div>

    <div class="mySelectDropdown"></div>

    <ul class="mySelectOptions"></ul>

</div>

你可以用CSS来设置自己喜欢的样式。

接下来就是用Javascript来控制模拟的下拉框了。(这里为了方便,使用了jQuery)

// 创建临时DOM,内容为模拟的下拉框(其中省略的部分为上面写的html代码)

var $mySelect = $('<div class="mySelect">...</div>')

// 把原来select有的样式复制到模拟的下拉框上

$mySelect.attr('class', $('#select').attr('class'))

$mySelect.attr('style', $('#select').attr('style'))

// 把原来select的选项复制到模拟的下拉框中

$('#select option').each(function () {

    var value = $(this).attr('value'),

        name  = $(this).html()

    $mySelect.find('.mySelectOptions').append('<li class="mySelectOption" data-id="' + value + '">' + name + '</li>')

})

// 在模拟下拉框中设置选中的值

$mySelect.find('.mySelectValue').html($('#select option:selected').html())

// 隐藏原有的select

$('#select').hide()

// 给模拟的下拉框绑定事件

$mySelect

    .on('click', function (e) {

        // 阻止点击事件向上冒泡

        e.stopImmediatePropagation()

        // 反转下拉列表的显示

        $('.mySelectOptions', this).toggle()

        // 给原有的select模拟点击事件

        $('#select').trigger('click')

    })

    .on('click', '.mySelectOption', function (e) {

        // 阻止点击事件向上冒泡

        e.stopImmediatePropagation()

        // 把选中的值显示到模拟的下拉框中

        $mySelect.find('.mySelectValue').html($(this).html())

        // 隐藏下拉列表

        $mySelect.find('.mySelectOptions').hide()

        // 把选中的值给到原来的select中

        $('#select').val($(this).data('id'))

        // 给原来的select模拟change事件

        $('#select').trigger('change')

    })

// 基本功能就到此了。其中可以缓存jQuery对象来优化,还能添加焦点事件,键盘事件等,按自己的需求慢慢修改吧。