微信小程序——好看的文字加输入框（文本框）

微信小程序——好看的文字加输入框（文本框）

在微信小程序中，创建一个好看的文字加输入框是非常简单的。下面我们将一步步地讲解如何实现这个效果。

效果图首先，我们需要定义一下我们的目标效果图。如下所示：

![效果图]( WXML代码接下来，我们需要编写WXML代码来实现这个效果。如下所示：

```wxml

账号

```

CSS样式为了使我们的文字和输入框看起来更好，我们需要添加一些CSS样式。如下所示：

```css.view-contain-ti {

display: flex;

align-items: center;

padding:10rpx;

border-bottom:1rpx solid ccc;

}

.text-ti {

font-size:14px;

color: 666;

margin-right:5rpx;

}

.input1 {

height:40rpx;

width:100%;

padding:10rpx;

border-radius:5rpx;

border:1rpx solid ccc;

}

```

JavaScript逻辑由于我们的需求比较简单，我们不需要在JavaScript中添加任何逻辑。

总结通过以上的步骤，我们已经成功地创建了一个好看的文字加输入框。这个组件可以轻松地被应用到我们的微信小程序中。

注意

* 在WXML代码中，`/input` 是关闭标签，不是 ``。

* 在CSS样式中，`.view-contain-ti` 的 `border-bottom` 属性设置为1rpx solid ccc，这是为了避免输入框的底部有一个边框。

* 在CSS样式中，`.text-ti` 的 `margin-right` 属性设置为5rpx，这是为了让文字和输入框之间有一个小间隔。

参考

* 微信小程序官方文档： WXML语法参考： CSS样式参考：

小程序