ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2021-01-28 13:57:41  阅读:72  来源: 互联网

标签:input1 微信 边框 输入框 组件 input border


问题情景

在微信小程序开发中经常用到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

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有