修改NutUI中TextInput 文本框的

先通过F12检查控制input框样式类

再打开 node_modules ——》@nutui——》nutui.css文件,然后通过Ctrl+F搜索该css文件中是否存在上图中控制的类.nut-textinput

然后在自己编写的网页中添加一个外框,并设置一个类名来指定对应要修改的样式,并结合scoped和>>>符号进行穿透,覆盖默认的样式。

html:

<div class="tit">
        <nut-textinput 
            v-model="val"
            placeholder="请输入"
            :clearBtn="true"
            :disabled="false"
            :hasBorder="false"
        />
</div>

css:

.tit >>> .nut-textinput input{
/* 修改输入框的样式 */
}
.tit >>> .nut-textinput input::-webkit-input-placeholder {
/* 修改提示placeholder的样式 */
}
发布了25 篇原创文章 · 获赞 11 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_40425415/article/details/105081987