微信小程序表单组件使用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>

演示示例