微信小程序表单组件使用css设置边框

所需资料

button | 微信开放文档

组件使用

1.输入框使用(标准书写要求value必填)

1.1value---默认值

<view>
      <label>骚气网名:</label>
      <input value="" placeholder="请输入" class="input01" />
    </view>

为什么要用label框起文字内容?

 为了之后可以对其进行样式的增加/更改

1.2.1如何设置输入框边框

微信小程序中input(输入框)是没有边框的需要设置可以通过css样式

 CSS 边框属性

属性描述
border简写属性,用于把针对四个边的属性设置在一个声明。
border-style用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-bottom简写属性,用于把下边框的所有属性设置到一个声明中。
border-bottom-color设置元素的下边框的颜色。
border-bottom-style设置元素的下边框的样式。
border-bottom-width设置元素的下边框的宽度。
border-left简写属性,用于把左边框的所有属性设置到一个声明中。
border-left-color设置元素的左边框的颜色。
border-left-style设置元素的左边框的样式。
border-left-width设置元素的左边框的宽度。
border-right简写属性,用于把右边框的所有属性设置到一个声明中。
border-right-color设置元素的右边框的颜色。
border-right-style设置元素的右边框的样式。
border-right-width设置元素的右边框的宽度。
border-top简写属性,用于把上边框的所有属性设置到一个声明中。
border-top-color设置元素的上边框的颜色。
border-top-style设置元素的上边框的样式。
border-top-width设置元素的上边框的宽度。
border-radius设置圆角的边框。

    我这里使用的是圆角边框

示例

index.wxss代码示例

.input01 {
  /* 实线边框solid */
border-style: solid;
/* 圆角弧度radius */
border-radius: 25px;
/* 边框大小设置 */
border-width: 1px;
/* 输入框长度设置 */
width: 200px;
}

index.wxml代码示例

 <input value="" placeholder="" class="input01" />

1.2.2placeholder---输入框为空时占位符(==输入框为空时提示)

1.3password---boolean类型 是否为密码类型显示  ture/false 是/否

<view>
      <label>国防密码:</label>
      <input value="" password="ture" placeholder="请输入" class="input01" />
    </view>

2.1单选框redio 需要用到多个单选要套用redio-group

 2.1.2 checked Boolean类型(判断类型)默认选中当前值  ture/false 是/否  

 <view>
      <label>性别</label>
      <radio-group>
        <radio value="男" checked="ture">男</radio>
        <radio>女</radio>
      </radio-group>
    </view>

演示示例

 3.多选框checkbox

    多个选项时使用一样要套用checkbox-group

<view>
      <label>小秘密</label>
      <checkbox-group>
        <checkbox>奇迹暖暖</checkbox>
        <checkbox>闪耀暖暖</checkbox>
      </checkbox-group>
    </view>

演示示例

  • 7
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值