工作室注册登录标签云赞助光荣榜

当前位置:首页 > 全栈分享 > html+css > 正文

如何修改select右边小三角的样式

发布时间:2017-09-28 21:55:21作者:魏义齐阅读:()

本文为博主原创文章,未经博主允许不得转载。

前几日给客户做手机页面遇到如下问题:

这是在火狐里看的样子,边框加了圆角,右边的小三角看起来格格不入,但select里面没有有关该三角的代码,如何修改它的样式?

第一:清除默认的select选择框样式,代码如下:
  1. appearance: none
  2. -moz-appearance: none
  3. -webkit-appearance: none
第二:选择一张你喜欢的图片来提示点击下拉。
background: url(../images/inputimg.jpg) no-repeat right; 
如果外边框加了圆角,还要注意图片的位置或形状,或者直接加隐藏溢出。

第三:如果是自适应页面,要注意不要被文字覆盖,加上如下代码即可:
padding-right: 14px; 
14px代表的是图片的宽度,这样的话,文字就不会盖住图片。

本文标签:,您可以阅读与「」相关的所有文章

魏义齐全栈技术交流:魏义齐全栈技术交流

相关阅读

    无相关信息

上一篇:前端经验分享之上传工具的使用和扒改网页下一篇:css图片闪光效果实现代码及详细解读

原创不易,您的赞助就是博主更新的动力!

赞助本站可在赞助光荣榜留下外链信息,支付宝扫此二维码可领红包

工作室注册登录标签云赞助光荣榜