js怎么设置select的样式,边框和三角的颜色

发布网友发布时间：2022-05-02 23:15

我来回答

共2个回答

热心网友时间：2022-04-20 11:38

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

你可以使用div来模拟select。

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

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

你可以用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对象来优化，还能添加焦点事件，键盘事件等，按自己的需求慢慢修改吧。

热心网友时间：2022-04-20 12:56

给点分，我可以发个现成的给你，兼容各个浏览器哦追问css不要引图片