微信小程序textarea边框
时间: 2023-09-09 11:06:51 浏览: 953
微信小程序 textarea 详解及简单使用方法
微信小程序中的 `<textarea>` 组件默认是没有边框的,如果你想要给 `<textarea>` 添加边框,可以通过以下两种方式实现:
1. 使用 CSS 样式自定义边框:
在对应页面的 `.wxss` 文件中,为 `<textarea>` 添加自定义的边框样式。例如,可以使用 `border` 属性来设置边框的宽度、样式和颜色。示例代码如下:
```css
/* 页面.wxss */
textarea {
border: 1px solid #ccc; /* 设置边框宽度为1px,样式为实线,颜色为#ccc */
}
```
2. 使用自定义组件:
如果你想多次使用带有边框的 `<textarea>`,可以将其封装为一个自定义组件,并在组件的 `.wxss` 文件中定义边框样式。示例代码如下:
```html
<!-- textarea-border.wxml -->
<textarea class="textarea-border"></textarea>
```
```css
/* textarea-border.wxss */
.textarea-border {
border: 1px solid #ccc; /* 设置边框宽度为1px,样式为实线,颜色为#ccc */
}
```
使用自定义组件时,只需要在页面的 `.wxml` 文件中引入该组件即可:
```html
<!-- 页面.wxml -->
<textarea-border></textarea-border>
```
以上是给 `<textarea>` 添加边框的两种方法,你可以根据实际需求选择其中一种来实现。
阅读全文