在HTML中,<textarea>
元素用于创建多行文本输入框。你可以使用CSS来控制<textarea>
的外观和布局。以下是一些常见的CSS样式示例:
textarea {
width: 300px; /* 设置宽度 */
height: 150px; /* 设置高度 */
padding: 10px; /* 设置内边距 */
border: 1px solid #ccc; /* 设置边框 */
border-radius: 5px; /* 设置圆角 */
font-size: 16px; /* 设置字体大小 */
resize: both; /* 允许用户调整大小 */
}
textarea {
width: 100%; /* 设置宽度为父容器的100% */
height: 200px; /* 设置高度 */
padding: 15px; /* 设置内边距 */
border: 2px solid #4CAF50; /* 设置边框 */
border-radius: 8px; /* 设置圆角 */
font-family: Arial, sans-serif; /* 设置字体 */
font-size: 18px; /* 设置字体大小 */
line-height: 1.6; /* 设置行高 */
background-color: #f9f9f9; /* 设置背景颜色 */
color: #333; /* 设置文本颜色 */
resize: vertical; /* 允许用户垂直调整大小 */
overflow-y: auto; /* 当内容超出时显示滚动条 */
}
textarea {
width: 100%; /* 设置宽度为父容器的100% */
max-width: 600px; /* 设置最大宽度 */
height: 150px; /* 设置高度 */
padding: 10px; /* 设置内边距 */
box-sizing: border-box; /* 包括内边距和边框在内的宽度计算 */
}
如果你使用CSS框架如Bootstrap,你可以轻松地应用预定义的样式类:
<textarea class="form-control" rows="3"></textarea>
在Bootstrap中,form-control
类会自动应用一系列样式,使<textarea>
看起来更美观和一致。
<textarea>
元素对所有用户(包括使用屏幕阅读器的用户)都是可访问的。通过这些CSS样式,你可以自定义<textarea>
元素的外观,使其符合你的设计需求。