微信小程序input组件边框不显示问题的解决方法

问题情景

在微信小程序开发中经常用到input组件，但是如果按下面的wxml代码去写，input的边框是不会显示的，只有在鼠标点过去的时候才会有个光标

<view class="setinput">
   <input class="input1"></input>
</view>

 即使在wxss中设置了边框颜色为黑色，还是无法显示边框

.input1{
    border-color: black;
}

解决方法

在wxss中光设置边框颜色不够，还需要设置边框样式border-style，随便选择一种样式，输入框就显示出来了

.input1{
    border-color: black;
    border-style: soild
}

还有一种方法是利用box-shadow属性，也就是给组件添加外阴影，也能达到显示输入框的效果，个人感觉这样显示出的边框更好看些

我这里写一个margin-top是为了让输入框的上边框不和边界重合，不然看不出来上边框

.input1{
    margin-top: 50px;
    box-shadow: 0 0 3px #000;
}

效果是这样的：

标签：input1,微信,边框,输入框,组件,input,border
来源： https://blog.csdn.net/TENET_T/article/details/113332282