当前位置:Gxlcms > css > css实现自定义选择框的技巧方法(代码示例)

css实现自定义选择框的技巧方法(代码示例)

时间:2021-07-01 10:21:17 帮助过:50人阅读

大多数人都会觉得选择框的样式弄起来有点麻烦,但是本篇文章将会对你有点帮助,你基本上可以尽可能地删除原始选择,然后使用div包装进行样式设置(适用于IE8 +),话不多说,我们来直接进入正文。

这个方法看起来很简单,你可以根据自已的需求去设置样式(推荐课程:css视频教程)

代码如下:

HTML:

  1. <div class="select-style">
  2. <select>
  3. <option value="city1">合肥</option>
  4. <option value="city2">南京</option>
  5. <option value="city3">芜湖</option>
  6. <option value="city4">杭州</option>
  7. </select></div>

CSS:

  1. .select-style {
  2. border: 1px solid #ccc;
  3. width: 120px;
  4. border-radius: 3px;
  5. overflow: hidden;
  6. background: #fafafa url("image/greatwall.jpg") no-repeat 90% 50%;
  7. }
  8. .select-style select {
  9. padding: 5px 8px;
  10. width: 130%;
  11. border: none;
  12. box-shadow: none;
  13. background: transparent;
  14. background-image: none;
  15. -webkit-appearance: none;
  16. color: lightblue;
  17. }
  18. .select-style select:focus {
  19. outline: none;
  20. }

效果如下:

360截图20181106103314675.jpg

以上就是css实现自定义选择框的技巧方法(代码示例)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行