带计数文本域自身边框:focus高亮有问题实例页面
回到相关文章 »效果:
粘贴下面文字到输入框:
一 二 三 四 五, 上街 打老虎
代码:
CSS代码:
.textarea-x { max-width: 300px; position: relative; } .textarea-count { position: absolute; font-size: 12px; line-height: 20px; bottom: 5px; right: 10px; color: #999; } .textarea-x > textarea { display: block; width: 100%; padding: 7px 9px; box-sizing: border-box; border: 1px solid #d0d0d5; border-radius: 4px; background-color: #fff; padding-bottom: 30px; transition: border-color .2s; outline: 0; resize: none; } .textarea-x > textarea:focus { border-color: #00a5e0; }
HTML代码:
<div class="textarea-x"> <textarea id="forFocus" maxlength="250" rows="5"></textarea> <label for="forFocus" class="textarea-count">0/250</label> </div>