很早以前就看过ytzong的《宽度自适应的输入框》这篇文章,感觉很不错,非常详实,YUI的栅格决定宽度,内容决定高度确实很实用。
个人认为ytzong的这个方法有两点非常麻烦:
- <b><b><input type=”text”></b></b>需要套2层b标签;
- 公式:.fluid-input-inner{padding-right:输入框左边框 + 输入框右边框 + 输入框左padding + 输入框右padding}也很麻烦经常忘记。
前段时间在一个项目中真好用到,同事啄米鸟模拟了一个宽度自适应的输入框,原理和ytzong的大致相同,但是解决了以上两个麻烦点。当然也有不足的地方。
看代码:
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%; } |
12 |
< title >模拟宽度自适应的输入框</ title > |
17 |
< div class = "mod-retweet" > |
19 |
< div class = "mod-retweet-textarea" > |
20 |
< input type = "text" name = "textfield" id = "textfield" /> |
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 > |
可以发现一个非常讨厌的地方就是:
- 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/
建议继续学习:
- iframe大小自适应 (阅读:8790)
- 三谈Iframe自适应高度 (阅读:3626)
- 输入框的大小 (阅读:3336)
- iframe自适应高度代码 (阅读:2795)
- 一个兼容多种场合的Javascript图片大小自适应function (阅读:2527)
- 移动端自适应方案 (阅读:2515)
- 多栏自适应布局问题浅谈 (阅读:2206)
- 自适应圆角 (阅读:2068)
- 阿里输入框交互尝试、启发式评估及优化建议 (阅读:1590)
- CSS深入理解流体特性和BFC特性下多栏自适应布局 (阅读:1091)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习