使用placeholder-class
增加类名(这个可以
)
html
<input type="text" class="search-input" placeholder-class="search-input-placeholder" placeholder="输入关键词搜索" />
<style scoped>
/deep/ .search-input-placeholder {
color: red;
}
</style>
但是有限制和注意点
- 只能使用
font-size、font-weight、color
这几个属性 - 如果
style
中有scoped
时,需要在类名前加上/deep/
使用placeholder-style
直接写行内样式(这个我没生效
)
html
<input type="text" class="search-input" placeholder-style="color: red" placeholder="输入关键词搜索" />
使用原生css方法修改(这个我没生效
)
css
input::placeholder {
// some code
}
<!-- 其他浏览器兼容 -->
/* - Chrome ≤56,
- Safari 5-10.0
- iOS Safari 4.2-10.2
- Opera 15-43
- Opera Mobile >12
- Android Browser 2.1-4.4.4
- Samsung Internet
- UC Browser for Android
- QQ Browser */
::-webkit-input-placeholder {
color: #ccc;
font-weight: 400;
}
/* Firefox 4-18 */
:-moz-placeholder {
color: #ccc;
font-weight: 400;
}
/* Firefox 19-50 */
::-moz-placeholder {
color: #ccc;
font-weight: 400;
}
/* - Internet Explorer 10--11
- Internet Explorer Mobile 10-11 */
:-ms-input-placeholder {
color: #ccc !important;
font-weight: 400 !important;
}
/* Edge (also supports ::-webkit-input-placeholder) */
::-ms-input-placeholder {
color: #ccc;
font-weight: 400;
}
/* CSS Working Draft */
::placeholder {
color: #ccc;
font-weight: 400;
}
有些样式是生效到input元素的属性中的
比如我这边本次就是要修改padding-left
,最后暂时放弃先去修改输入值的属性的时候无意中发现的
css
.search-input {
background-color: #fff;
height: 70rpx;
width: 460rpx;
border-radius: 250rpx;
padding-left: 64rpx;
}