模拟宽度自适应的输入框

时间：2010年11月24日作者：愚人码头查看次数:5,734 views评论次数：9

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

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

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

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

看代码：


< !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。

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

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《模拟宽度自适应的输入框》

如果你读了我的文章，觉得有帮助：

说明

标签：宽度自适应分类：html+css

8条评论

修远兮留言于:2010年11月24日22:33

抢沙发。

[回复]
myhere留言于:2010年11月25日09:12

input:focus{outline:none;} 解决 focus 问题。。

[回复]
ivan留言于:2010年11月25日10:14

好像不是很实用，一般都不会100%~

[回复]
愚人码头留言于:2010年11月25日10:29

@myhere 这个很强大啊！哈哈！谢谢！

[回复]
李娟留言于:2010年11月25日15:04

很想问一下，input和textarea原来就可以通过class来控制，为什么要在外包多嵌套一个div来控制呢，这样不是很多余？

[回复]
CodeCTO留言于:2010年11月25日16:38

这个技巧不怎么实用

[回复]
濯焰留言于:2010年12月05日00:28

开发后台界面的正好碰到这个问题，很好用

[回复]
web前端寒风留言于:2010年12月14日00:19

css 粉丝，一般不太会用自适用的，呵呵

[回复]