写一个限制50个字的文本框加样式
时间: 2024-03-13 17:44:14 浏览: 16
好的,以下是一个限制50个字的文本框,使用HTML和CSS实现:
```html
<!DOCTYPE html>
<html>
<head>
<style>
textarea {
max-width: 400px;
max-height: 100px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
resize: none;
}
textarea:focus {
outline: none;
border-color: #555;
box-shadow: 0 0 5px #555;
}
.chars-left {
font-size: 12px;
color: #999;
margin-top: 5px;
}
.chars-left span {
font-weight: bold;
color: #555;
}
</style>
</head>
<body>
<textarea maxlength="50"></textarea>
<div class="chars-left"><span>50</span> characters left</div>
<script>
const textarea = document.querySelector('textarea');
const charsLeft = document.querySelector('.chars-left span');
textarea.addEventListener('input', () => {
charsLeft.textContent = 50 - textarea.value.length;
});
</script>
</body>
</html>
```
这个文本框使用了 `textarea` 标签,并设置了最大宽度、最大高度、内边距、字体大小、边框、边框半径和不可调整大小。还添加了一个焦点样式,在文本框获得焦点时外边框颜色和阴影会改变。最后,添加了一个计数器,显示还剩余多少字符可用,并通过 JavaScript 实现实时更新。