vue+elementui中改变input框背景颜色与placeholder颜色_vue el-input 框添加对应字段背景色-优快云博客

本文链接：https://blog.youkuaiyun.com/Simplify_Webpage/article/details/110197798

本文介绍了如何在Vue+ElementUI项目中，针对input元素自定义样式，包括设置透明背景和修改placeholder的字体颜色。由于ElementUI的内置样式可能覆盖自定义样式，作者选择使用原生CSS来实现这一效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

- 改变input框背景颜色（透明背景）
- 改变input框placeholder字体颜色

在解决过程中，可能是因为，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; 
}
 /* //关于解决输入框背景颜色 */