经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTMLCSS » CSS » 查看文章
自定义select 小三角
来源：cnblogs　　作者：冰雪Queen　　时间：2018/10/24 9:07:39　　对本文有异议

把select小三角换成自己的图片

效果：

css样式：

  1. <style>
  2.         #my_select {
  3.             display: flex;
  4.             display: -webkit-flex;
  5.             width: 120px;
  6.             font-size: 24px;
  7.             padding: 0 5px;
  8.             margin: 20px auto;
  9.             outline: none;
  10.             border: 1px solid #00DD00;
  11.             appearance: none;
  12.             /* 兼容Chrome */
  13.             -webkit-appearance: none;
  14.             background: url(Images/xia.png) no-repeat right center;
  15.             box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  16.             color: #FF5511;
  17.         }
  18.     </style>

HTML：

  1. <body>
  2.     <select name="" id="my_select">
  3.         <option value="0">苹果</option>
  4.         <option value="1">香蕉</option>
  5.         <option value="2">橘子</option>
  6.     </select>
  7. </body>

　　

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号