合买大神
网站首页 网站建设 公司动态 行业新闻 案例展示 关于我们

文章内容

模拟宽度自适应的输入框

日期:2013-11-25  来源:攀枝花惠康网络公司

很早以前就看过ytzong的《宽度自顺应的输入框》这篇文章,感受很不错,很是详实,YUI的栅格抉择宽度,内容抉择高度确实很适用。

小我认为ytzong的这个体例有两点很是麻烦:

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

看代码:

前段时刻在一个项目中真好用到,同事啄?#21828;?#27169;拟了一个宽度自顺应的输入框,事理和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 文本输入框的边框是用?#33258;?#20854;外层的容器的border来模拟?#27169;瑃extarea 和 input 文本输入框的自己边框 border:0 none。这样webkit下输入框focus后,输入框的边框在模拟的边框琅缦沔,体验上有点不爽。
  • 还有一点很是值?#31859;?#37325;的是:textarea的padding和margin必然要重置为0,否则在webkit和opera下会有藐小的bug。

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

文章来源:攀枝花惠康网络公司

惠康网络,是一家专业从事攀枝花网站建设,攀枝花网站制作,攀枝花网站设计公司,提供网站建设一条龙服务(网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广),惠康网络立足攀枝花,辐射全中国,攀枝花惠康网络的客户已经遍布国内各地大?#34892;?#22478;市,我们高效优质的网站建设服务深受用户好评。

客服?#35748;擼?img src="skin/images/tel.png" alt="tel" height="15" width="84" style="vertical-align:middle;">(谢先生)  客服QQ:1323605005  
服务邮箱:[email protected](售前咨询)  [email protected](技术部)  [email protected](售后服务)
公司地址:四川省攀枝花市
?#26102;啵?/span>617200

合买大神 电脑版绝地求生安装 皇马对巴拉多利德预测 北京赛车pk10开奖历史记录 桑坦德竞毕尔巴鄂 怪物聚集电子游戏 斯图加特大学官网 波斯波利vs塔什干棉农 北京快乐8官网开奖记录 秘密行动送彩金 达斯汀普瓦里尔发型