设计图上 Placeholder是白色的,所以就查看了一下改变placeholder的方法:
<input v-model="barcode" type="text" placeholder="请扫描条码" class="lightInput" />
//改变input框 宽度,高度,文字颜色吗,背景颜色及边框
.lightInput {
border: none;
width: 98%;
text-indent: 5px;
background: #2b2c2c !important;
height: 30.5px;
color: #ffffff;
}
//改变input框聚焦时,边框颜色
.lightInput:focus {
outline: 0;
border: 1px solid rgb(0, 112, 70);
}
修改 placeholder 颜色
<style>
.lightInput::placeholder {
color: #ffffff;
font-size: 12px;
}
input::input-placeholder {
color: #ffffff;
font-size: 12px;
}
.lightInput::-webkit-input-placeholder {
/* //兼容WebKit browsers(Chrome的内核) */
color: #ffffff;
font-size: 12px;
}
.lightInput::-moz-placeholder {
/* //Mozilla Firefox 4 to 18 */
color: #ffffff;
font-size: 12px;
}
.lightInput::-moz-placeholder {
/* //Mozilla Firefox 19+ */
color: #ffffff;
font-size: 12px;
}
.lightInput::-ms-input-placeholder {
/* //Internet Explorer 10+ */
color: #ffffff;
font-size: 12px;
}
</style>