技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> CSS/HTML --> 模拟宽度自适应的输入框

模拟宽度自适应的输入框

浏览:2196次  出处信息

很早以前就看过ytzong的《宽度自适应的输入框》这篇文章，感觉很不错，非常详实，YUI的栅格决定宽度，内容决定高度确实很实用。

个人认为ytzong的这个方法有两点非常麻烦：

  • <b><b><input type=”text”></b></b>需要套2层b标签；
  • 公式：.fluid-input-inner{padding-right:输入框左边框 + 输入框右边框 + 输入框左padding + 输入框右padding}也很麻烦经常忘记。

前段时间在一个项目中真好用到，同事啄米鸟模拟了一个宽度自适应的输入框，原理和ytzong的大致相同，但是解决了以上两个麻烦点。当然也有不足的地方。

看代码：

 
01 < !DOCTYPE HTML>
02 <html>
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
05 <style type="text/css">
06 h2 { margin:0; padding:10px 0; font-size:14px; }
07 .mod-retweet { background:#E4EFF4; border:1px solid #A8D1E0; padding:3px 5px 5px; margin-top:5px; }
08 .mod-retweet .mod-retweet-textarea { background-color: #FFFFFF; border:1px solid #64B2D1; margin-bottom:5px; overflow:hidden; padding:2px; position:relative; zoom:1 }
09 .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 }
10 .mod-retweet .mod-retweet-textarea input { border:0 none; font-size:12px; height:20px; line-height:1.5em; width:100%; }
11 </style>
12 <title>模拟宽度自适应的输入框</title>
13 </meta></head>
14   
15 <body>
16 <h1>模拟宽度自适应的输入框</h1>
17 <div class="mod-retweet">
18 <h2>模拟input的自适应：</h2>
19 <div class="mod-retweet-textarea">
20 <input type="text" name="textfield" id="textfield"/>
21 </div>
22 </div>
23 <hr />
24 <div class="mod-retweet">
25 <h2>模拟textarea的自适应：</h2>
26 <div class="mod-retweet-textarea">
27 <textarea maxlength="500" rows="5" cols="45" name="bookcontent"></textarea>
28 </div>
29 </div>
30 </body>
31 </html>

可以发现一个非常讨厌的地方就是：

  • textarea 和 input 文本输入框的边框是用套在其外层的容器的border来模拟的，textarea 和 input 文本输入框的本身边框 border:0 none。这样webkit下输入框focus后，输入框的边框在模拟的边框里面，体验上有点不爽。
  • 还有一点非常值得注意的是：textarea的padding和margin一定要重置为0，否则在webkit和opera下会有细小的bug。

查看demo：http://www.css88.com/demo/input-textarea-adaptive/

建议继续学习：

  1. iframe大小自适应    (阅读：8883)
  2. 三谈Iframe自适应高度    (阅读：3651)
  3. 输入框的大小    (阅读：3349)
  4. iframe自适应高度代码    (阅读：2822)
  5. 一个兼容多种场合的Javascript图片大小自适应function    (阅读：2548)
  6. 移动端自适应方案    (阅读：2537)
  7. 多栏自适应布局问题浅谈    (阅读：2226)
  8. 自适应圆角    (阅读：2143)
  9. 阿里输入框交互尝试、启发式评估及优化建议    (阅读：1604)
  10. CSS深入理解流体特性和BFC特性下多栏自适应布局    (阅读：1108)
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：网页设计中的
后一篇：HTML5 中的一些新特性 >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1