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

当前位置:首页 > 全栈分享 > 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图片闪光效果实现代码及详细解读

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

赞助请备注,8.88元及以上可在赞助光荣榜留下外链信息。

HashOver畅言云评完全自托管的评论系统

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

最新会员
  • 东方星雨
  • deanhan
  • 1264822519
  • aini3311
  • a1051020101
  • weiyiqi