如何修改select下拉框的默认样式,我想这是每个程序猿在做项目时经常会用到问题,毕竟默认的样式实在不敢恭维,而且也不能满足我们的网站的整体风格,如果是用css去设置样式是没问题的,但是你要是想要根据自己的想法控制select下拉框的显示数量,以及超出部分出现滚动条的效果就不能用以往的css去设置了,不信你可以试一下。虽然select会自带出现下拉框,如下图显示,但是还是太丑,这样的作品拿出去不仅客户不买单,会被boss骂死的。老规矩先来介绍一些有关select的属性,然后提供实现方法。

size 属性
size 属性是今天我们实现下拉框滚动条以及显示固定数量的效果主要用到的一个属性,虽然不起眼,但是结合js就会发挥相当大的作用。
码云笔记
mybj123.com
javascript教程
前端开发教程
效果

通过效果可以看到,我们设置了四条option,通过select的size=3属性控制显示条数为3条,剩下的则需要下拉来查看。
说到这儿大家可能担心浏览器的支持问题,目前所有主流浏览器都支持 size 属性,所以放心使用。
定义和用法
size 属性规定下拉列表中可见选项的数目。
如果 size 属性的值大于 1,但是小于列表中选项的总数目,浏览器会显示出滚动条,表示可以查看更多选项。
语法
属性值
值
描述
number
下拉列表中可见选项的数目。默认值是 1。如果使用了 multiple 属性,默认值是 4。
我们现在遇到的问题是select默认的会将所有的option全部显示出来,当数据过多时,下拉框会显得很长。
我们期待结果:带有滚动条,显示一定数量的option,通过滚动查看更多option。
两种解决方法
jQuery方法
HTML代码:
码云笔记
mybj123.com
javascript教程
前端开发笔记
前端开发教程
vue教程
HTML教程
css教程
Java教程
jQuery代码:
window.selectFocus = function(that) {
$(that).attr("size", 5);
};
window.selectClick = function(that) {
$(that).parent().removeAttr("size");
$(that).parent().blur();
$(that).parent().children("[selected='selected']").removeAttr("selected");
$(that).attr("selected", "");
};
效果展示

友情提示:引入jQuery包
Javascript方法
使用input和selec组合实现,推荐使用此方法,这种方式实现的效果更友好,方便移植
HTML代码:
码云笔记
mybj123.com
javascript教程
前端开发笔记
前端开发教程
vue教程
HTML教程
JavaScript代码:
function stopPropagation(e) {
if (e.stopPropagation){
/*stopPropagation符合W3C标准.适用于FireFox等浏览器,不支持IE*/
e.stopPropagation();
}else{
/*cancelBubble方法不符合W3C的标准.且只支持IE浏览器*/
e.cancelBubble = true;
}
}
let showContent = document.getElementById('showContent');
let selContent = document.getElementById('selContent');
showContent.onclick = function(e){
selContent.style.display = 'block';
stopPropagation(e);
}
selContent.size = 5;
selContent.onchange = function(e){
var option = this.options[this.selectedIndex];
showContent.value = option.innerHTML;
selContent.style.display = 'none';
}
效果展示:

以上都是自己纯代码实现,当然也有很多优秀的相关插件实现这些效果,这里不做推荐,我个人还是喜欢自己去写,既可以学习又能加深记忆,何乐而不为呢。
本文介绍了如何使用CSS和JavaScript来修改HTML select元素的默认样式,包括设置显示数量和添加滚动条效果。通过设置size属性并结合jQuery或原生JavaScript方法,可以实现下拉框的定制。示例代码展示了如何在选中时扩大显示选项,失去焦点时恢复原样,以及使用input和select组合实现更友好的效果。
4623

被折叠的 条评论
为什么被折叠?



