- < !DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <style type="text/css">
- h2 { margin:0; padding:10px 0; font-size:14px; }
- .mod-retweet { background:#E4EFF4; border:1px solid #A8D1E0; padding:3px 5px 5px; margin-top:5px; }
- .mod-retweet .mod-retweet-textarea { background-color: #FFFFFF; border:1px solid #64B2D1; margin-bottom:5px; overflow:hidden; padding:2px; position:relative; zoom:1 }
- .mod-retweet .mod-retweet-textarea textarea {padding: 0;margin: 0; border:0 none; font-size:12px; height:80px; line-height:1.5em; width:100%; display:block }
- .mod-retweet .mod-retweet-textarea input { border:0 none; font-size:12px; height:20px; line-height:1.5em; width:100%; }
- </style>
- <title>模拟宽度自适应的输入框</title>
- </meta></head>
- <body>
- <h1>模拟宽度自适应的输入框</h1>
- <div class="mod-retweet">
- <h2>模拟input的自适应：</h2>
- <div class="mod-retweet-textarea">
- <input type="text" name="textfield" id="textfield"/>
- </div>
- </div>
- <hr />
- <div class="mod-retweet">
- <h2>模拟textarea的自适应：</h2>
- <div class="mod-retweet-textarea">
- <textarea maxlength="500" rows="5" cols="45" name="bookcontent"></textarea>
- </div>
- </div>
- </body>
- </html>
可以发现一个非常讨厌的地方就是：
•textarea 和 input 文本输入框的边框是用套在其外层的容器的border来模拟的，textarea 和 input 文本输入框的本身边框 border:0 none。这样webkit下输入框focus后，输入框的边框在模拟的边框里面，体验上有点不爽。
•还有一点非常值得注意的是：textarea的padding和margin一定要重置为0，否则在webkit和opera下会有细小的bug。