vue+elementui中改变input框背景颜色
在解决过程中,可能是因为,elementui自带的样式会覆盖我后写的css样式。于是弃用改用原生。
改变input框背景颜色(透明背景)
<input v-model="loginForm.username" class="noback" placeholder="请输入用户名/手机号" >
/* 改变input框背景颜色 */
input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
-webkit-text-fill-color: #ededed !important;
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
background-color:transparent;
background-image: none;
/* //背景色透明 生效时长 过渡效果 启用时延迟的时间 */
transition: background-color 50000s ease-in-out 0s;
}
input {
background-color:transparent;
}
input:-webkit-autofill {
/* //transparent 即设置背景色为透明-可改为其他颜色 */
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
-webkit-text-fill-color: rgba(255,255,255,1)!important;
}
/* //关于解决输入框背景颜色 */
改变input框placeholder字体颜色
/* */
.form_container input::-webkit-input-placeholder {
/* WebKit browsers */
color: #ccc;
}
.form_container input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #ccc;
}
.form_container input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #ccc;
}
.form_container input:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #ccc;
}
/* //关于解决输入框背景颜色 */
版权声明:本文为Simplify_Webpage原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。