模拟宽度自适应的输入框

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

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

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

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

看代码:
[code=”html”]
< !DOCTYPE HTML>


模拟宽度自适应的输入框

模拟宽度自适应的输入框

模拟input的自适应:


模拟textarea的自适应:


[/code]
可以发现一个非常讨厌的地方就是:

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

查看demo:https://www.html.cn/demo/input-textarea-adaptive/

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 模拟宽度自适应的输入框

评论 9

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    抢沙发。

    修远兮8年前 (2010-11-24)回复
  2. #-48

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

    myhere8年前 (2010-11-25)回复
  3. #-47

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

    ivan8年前 (2010-11-25)回复
  4. #-46

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

    8年前 (2010-11-25)回复
  5. #-45

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

    李娟8年前 (2010-11-25)回复
  6. #-44

    这个技巧不怎么实用

    CodeCTO8年前 (2010-11-25)回复
  7. #-43

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

    濯焰8年前 (2010-12-05)回复
  8. #-42

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

    web前端寒风8年前 (2010-12-14)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏