当前位置: 首页>移动开发>正文

小程序 ios input 边框 微信小程序输入框边框

所需资料

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

设置圆角的边框。

    我这里使用的是圆角边框

示例

小程序 ios input 边框 微信小程序输入框边框,小程序 ios input 边框 微信小程序输入框边框_小程序 ios input 边框,第1张

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---输入框为空时占位符(==输入框为空时提示)

小程序 ios input 边框 微信小程序输入框边框,小程序 ios input 边框 微信小程序输入框边框_css_02,第2张

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>

演示示例

小程序 ios input 边框 微信小程序输入框边框,小程序 ios input 边框 微信小程序输入框边框_css_03,第3张

 3.多选框checkbox

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

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

演示示例

小程序 ios input 边框 微信小程序输入框边框,小程序 ios input 边框 微信小程序输入框边框_java_04,第4张


https://www.xamrdz.com/mobile/4gd1962773.html

相关文章: