textarea 样式怎么设置
时间: 2024-08-08 09:01:07 浏览: 48
在HTML中,`<textarea>`元素主要用于让用户输入多行文本。如果你想改变它的样式,可以使用CSS来调整。以下是一些常见的`textarea`样式的设置:
1. **尺寸**:
```css
textarea {
width: 300px; /* 宽度 */
height: 100px; /* 高度 */
}
```
2. **边框**:
```css
textarea {
border: 1px solid #ccc; /* 边框样式、宽度和颜色 */
border-radius: 4px; /* 边框圆角 */
}
textarea:focus {
outline: none; /* 移除默认聚焦效果 */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 自定义聚焦时的阴影效果 */
}
```
3. **背景和前景色**:
```css
textarea {
background-color: #f8f8f8; /* 背景颜色 */
color: #333; /* 文本颜色 */
}
```
4. **换行和缩进**:
```css
textarea {
white-space: pre-wrap; /* 保持缩进来自动换行 */
line-height: 1.5; /* 行间距 */
}
```
5. **字体样式**:
```css
textarea {
font-family: Arial, sans-serif; /* 字体 */
font-size: 16px; /* 字体大小 */
}
```
以上样式可以在CSS文件中定义,也可以通过`style`属性直接应用到`<textarea>`元素上:
```html
<textarea style="width: 300px; height: 100px; border: 1px solid #ccc;"></textarea>
```