需求:需要给input的placeholder及光标设置特定样式

问题:cursor设置正常展示,但是设置placeholder时使用官方文档提供的属性会有问题

操作前样式没修改成功,但是输了内容删除之后样式立即生效
<input
class="input"
cursor-color="#fff"
placeholder="搜索内容"
placeholder-style="color: #fff;fontSize: 14px;"
/>

解决:直接使用类名,注意style不要加scoped,新写一个,如果还不成功就用深度选择器
<template>
<input
class="input"
cursor-color="#fff"
placeholder="搜索内容"
placeholder-class="placeholder_class"
/>
</template>
<style lang="scss">
.placeholder_class {
color: #fff;
font-size: 14px;
}
</style>
文章讲述了在Vue中设置input元素的placeholder样式时遇到的问题,官方文档中的placeholder-style属性存在问题。解决方案是使用placeholder-class替代,并提供了一个使用SCSS进行样式定义的例子。

5345

被折叠的 条评论
为什么被折叠?



