el-select、el-input修改样式

鱼空

已于 2023-07-05 13:51:49 修改

阅读量862

点赞数 1

文章标签： javascript 开发语言 elementui 前端 vue.js

于 2023-06-28 11:41:28 首次发布

本文链接：https://blog.csdn.net/m0_69502730/article/details/131433537

版权

el-select

准备

  <el-select v-model="goodsId" clearable placeholder="请选择" :popper-append-to-body="false">
       <el-option v-for="item in kindList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
 </el-select>

注：关键 :popper-append-to-body="false"

修改placeholder颜色

Element-ui下如何修改input的placeholder的颜色_呆小九的博客-CSDN博客

    ::v-deep .el-input__inner::placeholder {

        color: #000;

    }

修改右侧箭头

:v-deep .el-icon-arrow-up:before {

        content: '\e78f';

        color: #000;

    }

在element icon里检索

修改圆角边框

  ::v-deep .el-select .el-input__inner {
        border-radius: 0px;
    }

el-input

        .el-input {
            width: 250px;
            ::v-deep .el-input__inner {
                height: 30px;
                border-radius: 2px;
                font-size: 12px;
            }
        }