網站首頁 網站建設 公司動態 行業新聞 案例展示 關于我們

文章內容

模擬寬度自適應的輸入框

日期:2013-11-25  來源:攀枝花惠康網絡公司

很早以前就看過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/

文章來源:攀枝花惠康網絡公司

惠康網絡,是一家專業從事攀枝花網站建設,攀枝花網站制作,攀枝花網站設計公司,提供網站建設一條龍服務(網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣),惠康網絡立足攀枝花,輻射全中國,攀枝花惠康網絡的客戶已經遍布國內各地大中小城市,我們高效優質的網站建設服務深受用戶好評。

客服熱線:tel(謝先生)  客服QQ:1323605005  
服務郵箱:[email protected](售前咨詢)  [email protected](技術部)  [email protected](售后服務)
公司地址:四川省攀枝花市
郵編:617200

青海十一选五开奖图