一、修改 placeholder 样式的方式
css 通过 ::placeholder
,如:
input::placeholder {
font-size: 14px;
}
二、使用 js 增加 伪类样式 的方式
创建 style
文件,插入到 head
里
var style = document.createElement('style')
style.innerHTML = ".test::before{color:green}"
document.head.appendChild(style);
三、实例
- 以 vue 中
element-ui 的 input 组件
为例 - 该例中
.placeholder-wrap
需要再往下找到.el-input__inner
- 设置换行:
white-space: pre-wrap;
<el-input
class="input-width range placeholder-wrap"
v-model.trim="querDataForm.frequencyMax"
placeholder="最大值 例如:5~30,单位赫兹(Hz)"
></el-input>
created () {
// 获取屏幕尺寸,手动兼容 placeholder 换行问题
const clientWidth = document.body.clientWidth
const gap = 1499
let style = document.createElement('style')
// 小于这个临界值,placeholder 手动设置换行,并且整体内容上移 20%(优化视觉效果)
style.innerHTML = clientWidth < gap
? `.placeholder-wrap .el-input__inner::placeholder {
white-space: pre-wrap;
text-align: center;
transform: translateY(-20%);
}`
: `.placeholder-wrap .el-input__inner::placeholder {}`
document.head.appendChild(style)
},