select option 格栅化

有个需求,在option中格栅化,折腾过插入空格,背景色svg化之类的,都有些许瑕疵。现在用css解决了。

Demo:select-option-test

代码如下:

<!DOCTYPE html>
<html>

  <head> 
    <meta charset="utf-8"> 
    <title>测试select(test)</title> 
  </head>
  <style>
    select[multiple] {
      -webkit-appearance: none;
      width: 510px;
      background-color: #a8a1c5;
    }

    option {
      cursor: pointer;
      position: relative;
      left: -10px;
    }

    /* 鼠标划入 */
    /* option:hover {
      color: #EC6F66;
    } */

    /* 鼠标选中 */
    /* select:focus {
      background-color: #719ECE;
    } */

    /* 鼠标点击 */
    /* select:active {
      background-color: #1d1d1b !important;
      color: aqua !important;
      display: none;
    } */

    /* 选中的项目 */
    /* option:checked {
      background-color: #1d1d1b !important;
      color: #EC6F66 !important;
      display: none;
    } */

    /* 末尾追加 */
    option:after {
      content: var(--myTime);
      color: black;
      position: -webkit-sticky;
      /* position: sticky; */
      position: absolute;
      left: 330px;
    }

    /* 前面追加 */
    option:before {
      content: var(--myDIR);;
      position:relative;
        left:250px;
    }

    select:focus option:checked:after,
    select:focus option:checked:before {
      color: white;
    }
  </style>

  <body>

    <select id="s" multiple size="8">
      <option value="volvo" style="--myTime:'2021/09/22';--myDIR:'DIR';">Volvo1</option>
      <option value="saab" style="--myTime:'2021/09/23';--myDIR:'DIR';">Saab22</option>
      <option value="opel" style="--myTime:'2021/09/24';--myDIR:'      ';">Opel333</option>
      <option value="audi" style="--myTime:'2021/09/25';--myDIR:'      ';">Audi444</option>
      <option value="audi" style="--myTime:'2021/09/26';--myDIR:'      ';">55555555</option>
    </select>

    <select>
      <option value="volvo" style="--myTime:'2021/09/22';--myDIR:'DIR';">Volvo</option>
      <option value="saab" style="--myTime:'2021/09/24';--myDIR:'      ';">Saab</option>
      <option value="opel" style="--myTime:'2021/09/24';--myDIR:'      ';">Opel</option>
      <option value="audi" style="--myTime:'2021/09/24';--myDIR:'      ';">Audi</option>
    </select>

    <select size="8" style="width: 500px;">
      <option value="volvo" style="--myTime:'2021/09/22';--myDIR:'DIR';">Volvo</option>
      <option value="saab" style="--myTime:'2021/09/22';--myDIR:'DIR';">Saab</option>
      <option value="opel" style="--myTime:'2021/09/22';--myDIR:'DIR';">Opel</option>
      <option value="audi" style="--myTime:'2021/09/22';--myDIR:'DIR';">Audi</option>
      <option value="volvo" style="--myTime:'2021/09/24';--myDIR:'      ';">Volvo</option>
      <option value="saab" style="--myTime:'2021/09/24';--myDIR:'      ';">Saab</option>
      <option value="opel" style="--myTime:'2021/09/24';--myDIR:'      ';">Opel</option>
      <option value="audi" style="--myTime:'2021/09/24';--myDIR:'      ';">Audi</option>
      <option value="volvo" style="--myTime:'2021/09/24';--myDIR:'      ';">Volvo</option>
      <option value="saab" style="--myTime:'2021/09/24';--myDIR:'      ';">Saab</option>
      <option value="opel" style="--myTime:'2021/09/24';--myDIR:'      ';">Opel</option>
      <option value="audi" style="--myTime:'2021/09/24';--myDIR:'      ';">Audi</option>
      <option value="volvo" style="--myTime:'2021/09/24';--myDIR:'      ';">Volvo</option>
      <option value="saab" style="--myTime:'2021/09/24';--myDIR:'      ';">Saab</option>
      <option value="opel" style="--myTime:'2021/09/24';--myDIR:'      ';">Opel</option>
      <option value="audi" style="--myTime:'2021/09/24';--myDIR:'      ';">Audi</option>
    </select>

  </body>

</html>

1人评论了“select option 格栅化”

  1. Pingback: option里加svg背景图 – GANWT

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注