uniapp小程序踩坑input样式问题

最新推荐文章于 2024-06-27 11:33:41 发布

limuu09

最新推荐文章于 2024-06-27 11:33:41 发布

阅读量1.2k

点赞数 5

文章标签： uni-app 小程序

本文链接：https://blog.csdn.net/limuu09/article/details/138319688

版权

需求：需要给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>