<textarea name="" id="" cols="30" rows="10"></textarea>
| 类别 | 说明 |
|---|---|
| cols | 列数；建议使用CSS宽高指定 |
| rows | 行数；建议使用CSS宽高指定 |
| wrap | 是否换行；默认 on | 换行。off | 不换行。谁会不换行呢 |
| 类别 | 说明 |
|---|---|
| change | 选择改变时 |
| focus | 获取焦点时 |
| blur | 失去焦点时 |
textarea {
display: block;
width: 100%;
resize: none;
border: none;
outline: none;
padding: 10px;
background-color: transparent;
font: inherit;
color: inherit;
box-sizing: border-box;
}
.ta {
border: 1px solid #ccc;
border-radius: 6px;
}
.ta:focus {
border-color: #f40;
}
textarea::-webkit-scrollbar {
width: 8px;
}
textarea::-webkit-scrollbar-thumb {
background-color: #f40;
}
let ta = document.querySelector('#ta-bg');
function setBg(color) {
ta.style.background = color;
}
ta.addEventListener('focus', (e) => {
setBg('#f3f4f5')
});
ta.addEventListener('blur', (e) => {
setBg('#fff')
});