vue+elementui中改变input框背景颜色与placeholder颜色

  • Post author:
  • Post category:vue

在解决过程中,可能是因为,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 版权协议,转载请附上原文出处链接和本声明。