自己修改select的样式(修改select右边的小三角)
CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可。
- select {
- /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
- border: solid 1px #000;
- /*很关键:将默认的select选择框样式清除*/
- appearance:none;
- -moz-appearance:none;
- -webkit-appearance:none;
- /*在选择框的最右侧中间显示小箭头图片*/
- background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
- /*为下拉小箭头留出一点位置,避免被文字覆盖*/
- padding-right: 14px;
- }
- /*清除ie的默认选择框样式清除,隐藏下拉箭头*/
- select::-ms-expand { display: none; }
参考链接:
http://uplifted.NET/programming/change-default-select-dropdown-style-just-css/
自己修改select的样式(修改select右边的小三角)的更多相关文章
- 今天被 <!doctype html> 搞了两个小时,两个页面同样的样式,chosen右边的小箭头,一个上下居中对齐 一个居顶对齐。最后找到问题所在doctype
今天被 <!doctype html> 搞了两个小时,两个页面同样的样式,chosen右边的小箭头,一个上下居中对齐 一个居顶对齐.最后找到问题所在doctype <-- 这个小箭头
- 解决手机浏览器和微信中select中border:none;无用和去掉小三角
设置select的边框为none:在PC端是没有问题的,但是放到手机浏览器和微信里上还是会出现边框 解决办法: appearance:none; -moz-appearance:none; /* Fi ...
- 用CSS样式写选择框右侧小三角
直接上代码! <!DOCTYPE html><html lang="en"><head> <title>小三角</title& ...
- 修改radio、checkbox、select默认样式的方法
样式 radio select checkbox 兼容性 现在前端页面效果日益丰富,默认的input组件样式显然已经不能满足需求.趁着这次开发的页面中有这方面的需求,在这里整理一下修改radio.ch ...
- select下拉框option的样式修改
select原样式: 进行样式修改后的样式: 附上修改代码: //select外面必须包裹一个div,用来覆盖select原有的样式<div class="option"&g ...
- 【css】 如何修改select的样式
select { /*清除select默认样式*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; -ms-appear ...
- select 下拉框样式修改 option文字居右
select { direction: rtl; /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的sele ...
- m_Orchestrate learning system---三十六、如何修改插件的样式(比如ueditor)
m_Orchestrate learning system---三十六.如何修改插件的样式(比如ueditor) 一.总结 一句话总结:所有的js,html插件,修改样式无非是两种,一是直接修改css ...
- vue中修改子组件样式
一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...
随机推荐
- Bootstrap 分页功能
function bootstrappage() { var options = { currentPage: currentPage, totalPages: totalPages, size: ' ...
- 如何在一整张背景图中,加隐形的a标签
很常见的一个需求,就上图每个国家图标都得加上各自指定的a标签 这时,我们就可以去加上隐藏且定位准确的几个a标签 这个时候,主要用到的就是text-indent和overflow 这两个属性的配合.te ...
- 回首Java(始)
自接触Java开始,已然5载春秋. 如今每每在深入学习过程中,时刻感到力不从心. It's time!该拾起J2SE基石. 平地高楼,日积跬步.根底不坚实,如今才寸步维艰. 回头再温故.
- 1007: [HNOI2008]水平可见直线
先对a排序,a相等的话就对b排序: 维护一个栈,每次取栈的头两个,和当前的直线相比较: 如果当前的直线把头第一个屏蔽,就将他出栈,一直到不能屏蔽为止: 代码: #include<cstdio&g ...
- hdu 4878 ZCC loves words AC自动机+中国剩余定理+快速幂
题意就不说了. 分析:折腾好几天自己写的代码还是看了别人代码后发现几乎没什么复杂度的差别,可是就是一直超时,后来干脆照着别人写啊,一直WA,就在准备放弃干脆先写这篇博客的时候,又看了一眼WA的代码,发 ...
- *[codility]MaxCounters
http://codility.com/demo/take-sample-test/maxcounters 简单题.注意要记录两个max,一个是最大值,一个是已经生效的最大值. // you can ...
- configure文件中判断某函数或库是否存在的一个方法
echo " #include<stdio.h> #include<openssl/ssl.h> int main() { return 0; } " &g ...
- 关于JQuery与AJAX验证
AJAX验证,其实就是JS代码,他就是先利用Jquery或JS获取一个值,然后偷偷的把值传送到验证界面,然后在偷偷的把验证后的结果给传回来,利用传回来的结果在进行JS判断,从而不会刷新界面. 用图片解 ...
- linux下的X server:linux图形界面原理
linux下的X server:linux图形界面原理 Moblin Core是在Gnome Mobile的平台上建立.我以前玩Linux,提交的都和图像没有关系,连Xwindows都不用启动,开 ...
- 修改UISearchBar的Cancel按钮为中文等本地化问题
正确方法: 1:创建本地化strings. InfoPlist.strings 2:对InfoPlist.strings添加本地化语言. 即可. 只要添加文件, 系统会根据语言来调整显示文字 常见的搜 ...