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

文章內容

模擬input type=file

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

這是一個根基的input type=”file”。當然這里你可能沒看到文本框和按鈕的代碼,我們可以在后面的js中將文本框和按鈕追加到html中。

表單中的input type=”file”在前端開發中經常會用到,可是很悲劇的是input type=”file”在各個瀏覽器下默示不統一,樣式很難起浸染;

凡是我的設計師長短常愛美的,如不美觀真的要還原設計稿,只能經由過程文本框和按鈕去模穆矣閩input type=”file”。

HTML代碼如下:

<div class="type-file-box">
<form action="" method="post" name="form1" id="form1">
<input name="fileField" type="file" id="fileField" size="28" />

</form>
</div>

$(function(){
var textButton="<input type='text' name='textfield' id='textfield' class='type-file-text' />  <input type='submit' name='button' id='button' value=http://www.css88.com/archives/'瀏覽...' class='type-file-button' />"
$(textButton).insertBefore("#fileField");
$("#fileField").change(function(){
$("#textfield").val($("#fileField").val());
);
);
這里用了jq當input type=”file”得值onchange的的時侯將文本框的值設置成input type=”file”的值,OK了 demo演示:http://www.css88.com/demo/input-file/

注重:size=”28″是在firefox下input type=”file”的寬高是不能經由過程樣式來界說的,所以用了size屬性來節制input type=”file”的寬度

CSS代碼如下:


.type-file-box{ position:relative;width:260px}

input{ vertical-align:middle; margin:0; padding:0}

.type-file-text{ height:22px; border:1px solid #cdcdcd; width:180px;}

.type-file-button{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}

.type-file-file{ position:absolute; top:0; right:0; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }

注重:這里的filter:alpha(opacity:0);opacity: 0是讓input type=”file”全透明,這樣用戶看不到input type=”file”。層級在文本框和按鈕之上。這樣用戶在點擊按鈕的時侯現實上點擊的input type=”file”; js代碼:

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

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

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

青海十一选五开奖图