改变原生input框中placeholder颜色的方法

最新推荐文章于 2024-04-03 09:13:38 发布

蓝胖子的多啦A梦

最新推荐文章于 2024-04-03 09:13:38 发布

阅读量559

点赞数

分类专栏： input框 js 方法文章标签： css html css3

本文链接：https://blog.csdn.net/Maxueyingying/article/details/128116079

版权

方法同时被 3 个专栏收录

72 篇文章 1 订阅

订阅专栏

67 篇文章 1 订阅

订阅专栏

input框

6 篇文章 0 订阅

订阅专栏

设计图上 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>