首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

修改select下拉菜单样式(input下拉框select)

自带的select下拉菜单美观度实在不怎么样,并且不容易美化,当然我们可以模拟实现select下拉菜单,但是代码稍显复杂,不过也可以通过简单的CSS实现此效果,下面通过实例简单作一下介绍。..."> 星期1 星期2 星期3 星期4 以上代码实现了实现了select下拉框美化效果...,当然这里也谈不上美观,因为在这里只是介绍一下它的实现原理,以供大家改造之用,下面简单介绍一下它的实现过程: 实现原理: 其实select下拉菜单美化最让人蛋疼的地方就是向下的箭头,在这里我们在select...下拉菜单外面套了一个div,并且div的宽度小于select下拉菜单的宽度,这样的目的是将select下来菜单的箭头遮挡,然后再次div设置一个背景图片作为下拉箭头,这样就实现了我们想要的效果。

3K10

select设置背景

我们可以采用另一种透明属性,这种方式采用css方式来实现,就是select标签添加opacity属性,将他的值设置为0,即可实现select标签透明。...那么我们就该用上模拟的方式了,那就是在select标签下添加一个input标签,让select标签覆盖input,同时select添加onchange事件,通过js的方式来获取select标签的内容,...当select标签更改时将select选中的值赋值input,因为select是透明的,所以在他下面的input里的字就显示出来了,同时点击select时不会点到input,这时就可以采用上面我说到的...input添加背景的方法了,此时input添加背景就等同于select添加背景了。...到此就完美的实现了select标签添加背景了。

1.8K20
领券