element修改el-select样式、el-date-picker⽇期组件更改plac。
。。
VUE element-ui之页⾯全屏时el-select下拉菜单不显⽰问题解决
:popper-append-to-body="false"  适⽤⼤屏下拉选择框在屏幕外⾯问题
<el-select
v-model="value"
placeholder="区域选择"
:popper-append-to-body="false"  //加⼊此⾏代码，完美解决
>
假设位置错乱修改css
/deep/ .el-popper[x-placement^="bottom"] {
top: initial !important;
}
修改el-select样式
包裹的盒⼦⽗级的class，下以修改 el-select的样式为例有⼀个popper-class属性
<div class="view-action-box">
<el-select
input标签placeholder属性popper-class="elselect"
v-model="quarterValue"
placeholder="请选择"
>
</el-select>
</div>
Vue ⾥⾯可以多个style标签
<style>
/*最外层背景*/
.elselect {
background: #122856;
color: #fff !important;
border: 1px solid rgba(149, 190, 255, 0.32);
}
/*修改单个的选项的样式*/
.elselect .el-select-dropdown__item {
color: #fff !important;
font-size: 12px;
text-align: center;
}
/*item选项的hover样式*/
.elselect .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background-color: #0c1a546b;
background-color: #0c1a546b;
}
.elselect .el-popper[x-placement^="bottom"] .popper__arrow::after {  border-bottom-color: #04153d !important;
}
</style>
<style rel="stylesheet/css" lang="css" scoped>
/*修改el下拉样式*/
.view-action-box {
display: inline-block;
float: right;
}
.view-action-box /deep/ .el-input__inner {
height: 20px;
border: 1px solid rgba(149, 190, 255, 0.32);
background-color: #05153c;
color: #95beff;
width: 105px;
line-height: 20px;
font-size: 13px;
}
/*修改总体选项的样式最外层*/
.
view-action-box/deep/ .el-select-dropdown{
background-color: #08164d;
margin: 0px;
border:0px;
border-radius: 0px;
}
/*图标⾏⾼*/
.view-action-box /deep/ .el-input__icon {
line-height: initial;
}
/*placeholder的样式需要先选中⽗元素增加权重*/
.
view-action-box /deep/ input::-webkit-input-placeholder {
color: #95beff;
}
.view-action-box /deep/ input::-moz-input-placeholder {
color: #95beff;
}
.view-action-box /deep/ input::-ms-input-placeholder {
color: #95beff;
}
</style>
.hello{
/
/ 未选中任何选项的时候 placeholder的样式需要先选中⽗元素增加权重
/deep/ input::-webkit-input-placeholder {
color: #fff;
}
/deep/  input::-moz-input-placeholder {
color: #fff;
}
/deep/  input::-ms-input-placeholder {
color: #fff;
}
//修改的是el-input的样式
/
/⼀种⽅法是设置最⾥层el-input__inner的背景⾊外层的两级⽗元素设置为透明⾊
//另⼀种⽅法是从el-select到el-input__inenr的背景⾊都设置为需要的颜⾊
/deep/ .el-select,
/deep/ .el-input,
/deep/ .el-input__inner{
background-color:#08164D ;
color:#fff;
border:0px;
border-radius:0px;
text-align: center;
}
/
/el-input聚焦的时候外层的border会有⼀个样式
/deep/ .el-select .el-input.is-focus .el-input__inner{
border:0px;
}
//修改的是el-input上下的⼩图标的颜⾊
/deep/ .el-select .el-input .el-select__caret{
color:#fff;
}
//修改总体选项的样式最外层
/deep/ .el-select-dropdown{
background-color: #08164d;
margin: 0px;
border:0px;
border-radius: 0px;
}
//修改单个的选项的样式
/deep/ .el-select-dropdown__item{
background-color: transparent;
color:#fff;
}
//item选项的hover样式
/deep/ .el-select-dropdown__item.hover,
/
deep/ .el-select-dropdown__item:hover{
color:#409eff;
}
//修改的是下拉框选项内容上⽅的尖⾓
/deep/ .el-popper .popper__arrow, .el-popper .popper__arrow::after{
display: none;
}
}
el-date-picker⽇期组件更改placeholder的字体颜⾊
/deep/ .el-input__inner,
/deep/ .el-date-editor .el-range-input {  color: #fff;
&::placeholder {
color: #fff;
}
&::-webkit-input-placeholder {
/* WebKit browsers 适配⾕歌 */
color: #fff;
}
&:-moz-placeholder {
/* Mozilla Firefox 4 to 18 适配⽕狐 */    color: #fff;
}
&::-moz-placeholder {
/
* Mozilla Firefox 19+ 适配⽕狐 */
color: #fff;
}
&:-ms-input-placeholder {
/* Internet Explorer 10+  适配ie*/
color: #fff;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。