微信小程序创建输入框

一、相关知识：

• 创建输入框主要用到input组件https://developers.weixin.qq.com/miniprogram/dev/component/input.html
• 输入框形式主要有输入框型、下划线型

         

二、实现

-----------------------------------------输入框型：

• wxml文件：

1. placeholder-style：指定 placeholder 的样式，所以里面的color设置的是输入框的背景色。
2. placeholder：输入框为空时占位符，我理解的是要提示输入的内容。
3. type：input 的类型：文本、数字、身份证、带小数点的数字。
4. maxlength：最大输入长度，默认为140，设置为 -1 的时候不限制最大长度。

        

• wxss文件：

1. border-radius：设置圆角，当值为50%时，效果为圆形。
2. color：文本的颜色。

        

        

----------------------------------------- 下划线型：

• wxml文件：

        

• wxss文件：

1. border-color：元素的所有边框中可见部分的颜色，也可以为 4 个边分别设置颜色，如： border-top-color: #aaa;
2. border-style：设置元素所有边框的样式，也可以单独地为各边设置边框样式。属性值：solid,dashed,dotted,double等
3. border-width：用于为元素的所有边框设置宽度，也可以单独地为各边边框设置宽度。属性值：thin medium thick length。