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

模拟宽度自适应的输入框

浏览:2189次  出处信息

很早以前就看过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大小自适应    (阅读:8807)
  2. 三谈Iframe自适应高度    (阅读:3639)
  3. 输入框的大小    (阅读:3344)
  4. iframe自适应高度代码    (阅读:2803)
  5. 一个兼容多种场合的Javascript图片大小自适应function    (阅读:2531)
  6. 移动端自适应方案    (阅读:2524)
  7. 多栏自适应布局问题浅谈    (阅读:2212)
  8. 自适应圆角    (阅读:2082)
  9. 阿里输入框交互尝试、启发式评估及优化建议    (阅读:1596)
  10. CSS深入理解流体特性和BFC特性下多栏自适应布局    (阅读:1101)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:网页设计中的
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1