修改el-select的样式_教程

需求是修改el-select中el-option样式，当label长度过长时以省略号显示。

通过F12查看DOM树，找到el-option的是.el-select-dropdown__item中的span ，然后为了不污染其他的组件中的样式，利用样式穿透，但结果出乎意料，并没有修改成功。

scoped的作用范围是在div#app中的，查看DOM树发现，el-select的容器并不是挂载在#app下面的，自然而然，样式穿透无法生效。

查看Element UI的官方文档，可以发现，el-select为我们提供了一个属性，将该数据设置为false，即可将el-select的父容器移动到#app之下，从而达到一开始的目的。

select {

/*背景：和其他元素一样，都是设置 background 属性*/

background:#F00

/*三角1：先将默认的select选择框样式清除*/

appearance:none

-moz-appearance:none

-webkit-appearance:none

/*三角2：在选择框的最右侧中间显示小箭头图片*/

background: url('XXXXXX/XXXXXX/XXXXXX/xxxxxx.png') no-repeat scroll right center transparent

/*三角3：为下拉小箭头留出一点位置，避免被文字覆盖*/

padding-right: 14px

}

/*清除ie的默认选择框样式清除，隐藏下拉箭头*/

select::-ms-expand { display: none }

css设置下拉列表(select)样式首先我们需要获取到这个元素的id或者是class，然后在通过给这个元素设置它的width和height等等一些样式，具体的看代码:

<html>

<head>

<style>

.div1{

width:600px

height:200px

font-size:13px

}

.div select{

width:200px

}

.div select option{

width:150px

height:30px

}

</head>

<body>

<option value="volvo">Volvo</option>

</select>

</div>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

修改el-select的样式