修改select及option的样式-Discuz教程下载

修改select及option的样式

来自版块: Discuz教程发表于: 2024-7-1 23:02:04
201
0
如本资源下载地址失效,请点击此处进行反馈
开通本站Svip会员,全站资源免费下
html
  1.   <select class="select">
  2.       <option value="volvo" disabled>Volvo</option>
  3.       <option value="saab">Saab</option>
  4.       <option value="opel">Opel</option>
  5.       <option value="audi">Audi</option>
  6.     </select>
复制代码
CSS
  1. .select {
  2.       border: 1px solid #bdb2b2;
  3.       border-radius: 10px;
  4.       /*清除select聚焦时候的边框颜色*/
  5.       outline: none;
  6.       /*设置select的宽高*/
  7.       width: 200px;
  8.       height: 40px;
  9.       line-height: 40px;
  10.       /*隐藏select的下拉图标*/
  11.       appearance: none;
  12.       -webkit-appearance: none;
  13.       -moz-appearance: none;
  14.       /*通过padding-left的值让文字处于合适位置*/
  15.       padding-left: 20px;
  16.       /* 设置下拉图标 */
  17.       background: url("1.jpg") no-repeat right center transparent;
  18.     }
复制代码
option的样式没办法修改。
因为option是html固有元素;因而无论怎么修改在浏览器上都是不起作用的。
想修改option样式,只能通过div ul li模拟select功能;功能如下,具体细节可以自己再调节。
20210728142738356.gif html
  1. <input class="choose" type="text" placeholder="请输入" readonly="readonly">
  2.   <div class="option">
  3.     <ul>
  4.       <li>11</li>
  5.       <li>22</li>
  6.       <li>33</li>
  7.     </ul>
复制代码
css
  1. .choose {
  2.       padding: 8px 5px;
  3.       width: 190px;
  4.       outline: none;
  5.       border: 1px solid rebeccapurple;
  6.       border-radius: 5px;
  7.     }

  8.     .option {
  9.       display: none;
  10.       width: 180px;
  11.       padding: 5px 10px;
  12.       border-width: 0 1px 1px 1px;
  13.       border-style: solid;
  14.       border-color: #e2b5b5;
  15.     }

  16.     ul,
  17.     li {
  18.       margin: 0;
  19.       padding: 0;
  20.       list-style: none;
  21.     }
复制代码
js
  1. $(".choose").click(function () {
  2.       $(".option").show()
  3.     })
  4.     $(".option li").click(function () {
  5.       var _text = ($(this).text())
  6.       $(".choose").val(_text)
  7.       $(".option").hide()
  8.     })

  9. //如果某些选项不支持点击,提供下面这个思路
  10. $(".option li").click(function () {
  11.       var _text = ($(this).text())
  12.       if (_text == 33) {

  13.       } else {
  14.         $(".choose").val(_text)
  15.         $(".option").hide()
  16.       }
  17.     })
复制代码

全部评论 0

您需要登录后才可以回帖 立即登录
登录
0
0
0
返回顶部