先通过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的样式 */
}