修改下拉列表的样式

拼搏现实的明天。 2023-06-11 12:24 52阅读 0赞

option的样式我修改不成功；只能通过div ul li模拟select功能；我的项目是用vue做的，所以以下代码为下拉列表的一个组件。

<template>
      <div class="divInput">
        <div class="input" @click="openValue">
          <input @click="rotate" v-model="value" type="text" placeholder="请选择" />
          <span @click="rotate" :class="{show:isshow}">
          </span>
        </div>
        <div class="list" v-show="show">
          <ul>
            <li
              @click="getvalue(index,item)"
              v-for="(item,index) in tableData"
              :key="item.index"
            >{
       { item.name }}</li>
          </ul>
        </div>
      </div>
    </template>
    <script>
    export default {
      name: "javascript",
      data() {
        return {
          tableData: [
            {
              name: 111
            },
            {
              name: 222
            }
          ],
          show: false,
          isshow: false,
          value: ""
        };
      },
      methods: {
        openValue() {
          this.show = !this.show;
        },
        getvalue(index, item) {
          this.value = item.name;
          this.show = false;
        },
        rotate() {
          this.isshow = !this.isshow;
        }
      }
    };
    </script>
    <style lang="less" scoped>
    ul li {
      list-style: none;
    }
    .input {
      border-radius: 4px;
      width: 205px;
      height: 40px;
      line-height: 40px;
      padding-left: 10px;
      border: 1px solid #cccccc;
      margin-left: 120px;
      position: relative;
      span {
        position: absolute;
        right: 8px;
        top: 5px;
        width: 32px;
        height: 32px;
        background: url(../images/sanjiao.png);
        transition: all 0.5s ease;
        &.show {
          transform: rotate(180deg);
        }
      }
    }
    .input input {
      border: none;
      outline: none;
      width: 90%;
    }
    
    .list {
      margin-left: 120px;
      width: 205px;
      height: 92px;
      border: 1px solid #cccccc;
      overflow: hidden;
      padding: 10px 0;
      margin-top: 5px;
      overflow: hidden;
      position: absolute;
      background: white;
      z-index: 99;
      box-shadow: 0 0 2px gray;
    }
    .list ul li {
      width: 100%;
      height: 36px;
      text-align: left;
      cursor: pointer;
      line-height: 30px;
      padding-left: 10px;
    }
    .list ul li:hover {
      background-color: #cccccc;
    }
    </style>

**效果图：**

点击前  
![在这里插入图片描述][20191030173755573.png]  
点击后  
![在这里插入图片描述][20191030173802318.png]

[20191030173755573.png]: /images/20230531/76bd8d85dc1445f9b47eacbea7bff305.png
[20191030173802318.png]: /images/20230531/d5c083c284d8466389de7e8eda5939b5.png