html select 样式t调整_css修改html select下拉框样式(含右边箭头)

css修改html select下拉框样式(含右边箭头)2017-10-12 16:51

我们经常会看到一些页用用的select下拉框非常漂亮，其实很多是用插件实现的。

如果不使用插件，靠纯css能不能做出漂亮美观的select来呢？

答案是：可以。

其实select标签，不仅可以修改边框样式、颜色，还可以修改右边的下拉箭头。

修改边框样式，直接使用border:1px blue dashed就可以，当然相关参数自己修改。

然而要修改下接箭头，代码就稍微要复杂些，需要将select选择框的样式清除掉，然后再依靠background来添加箭头。

下面是详细代码： html代码

select{

/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/

border:1px #ff0000 dashed;

/*很关键：将默认的select选择框样式清除*/

appearance:none;

-moz-appearance:none;

-webkit-appearance:none;

/*在选择框的最右侧中间显示小箭头图片*/

background:url("http://www.santii.com/source/1507797721809079.gif") no-repeat scroll right center transparent;

/*为下拉小箭头留出一点位置，避免被文字覆盖*/

padding-right:14px;

}

/*清除ie的默认选择框样式清除，隐藏下拉箭头*/

select::-ms-expand{display: none;}

2015年

2016年

2017年

2018年

亲自测试一下

需要注意的是，旧版ie对其兼容性不好。

html select 样式t调整_css修改html select下拉框样式(含右边箭头)相关推荐

css修改layui的下拉框样式 js_layui创建表单下拉框样式不显示
border-left: 5px solid #009688; 注释:solid实体,实心样式: Blockquote:块引用;Fieldset:字段集; 1.所有浏览器都支持标签. fieldse ...
css修改layui的下拉框样式 js_layui下拉框实现级联
选择city 北京上海广州深圳杭州选择区域 layui.use('form', function () { var form = layui.form; layui.form.on('sel ...
css修改layui的下拉框样式 js_layui，经典模块化前端UI框架，前端菜鸟带你初识栅格。...
大家好,我是前端菜鸟李不白,这一期内容带来的是layui框架中的栅格布局. 那么什么才叫做栅格呢?如图所示. 那么网页中的栅格是怎么区分的?以优酷电脑版为例. 并不是说优酷就用的layui开发的,这里 ...
css修改layui的下拉框样式 js_layui的安装以及简单操作
最近有需要做前端界面的快速开发,于是就考虑到前端框架的使用.Layui是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简, ...
ElementUI:多个Select下拉框存在时调整个别下拉框样式
当dialog中存在多个下拉框的时候,想改变某一个下拉框的样式,于是给某一个select绑定类,发现并没有生效,换了一种方法,将el-select用div包裹,将类绑定在div上,也没有效果. 在控制 ...
select美化自定义下拉框样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jquery美化select，自定义下拉框样式
select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...
HTML下拉框样式美化
在网页中,下拉框的样式最难美化,默认样式巨丑,好在现在已经有各种框架实现了下拉框的样式美化,主要思路都是通过JS代码将下拉框元素用更容易设置样式的div进行替换,再将对应选项及事件进行关联. 最近一项 ...
css自定义下拉框样式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

html select 样式t调整_css修改html select下拉框样式(含右边箭头)

html select 样式t调整_css修改html select下拉框样式(含右边箭头)相关推荐

最新文章

热门文章