# Element UI 修改select樣式的方法

由於select的"框"和"下拉"是分開的，下拉的css放在body外，無法直接複寫。

### 法一 : 直接在index.html全局修改

:x: 不推!可能會汙染全局樣式

### 法二 : 加入:popper-append-to-body="false"

此方法可將下拉css移入body

<el-select v-model="value" :popper-append-to-body="false" placeholder="請選擇">
    <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
    >
    </el-option>
</el-select>

找尋對應位置，加入css
ex:修改下拉選單展開高度

.el-select {
    .el-scrollbar {
        .el-select-dropdown__wrap {
            max-height: 300px;
        }
    }
}

### popper-class
若要在element ui裡加入class，需要使用popper-class

<el-select
    v-model="value"
    popper-class="select"
    placeholder="請選擇"
>
    <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
    >
    </el-option>
</el-select>