CSS美化 input type=file 兼容各個(gè)瀏覽器
我要評(píng)論在日常重構(gòu)中，form表單家族中的 upload field 在使用 css 美化時(shí)令人頭疼！默認(rèn)情況下，各個(gè)瀏覽器下的表現(xiàn)層次不齊！如下圖所示，讓我等情何以堪。
通常，我們的設(shè)計(jì)師同學(xué)、產(chǎn)品同學(xué)都希望文件上傳域能夠在表現(xiàn)上有所突破：點(diǎn)擊頁(yè)面中美化過(guò)的圖片“選擇文件”就可以完美實(shí)現(xiàn)文件上傳域的功能。唉，理想很豐滿，現(xiàn)實(shí)很骨感！每當(dāng)我接到這樣的要求就會(huì)淚流滿面，加圖片容易，但它無(wú)法工作?。?/p>
好吧，苦逼的前端開(kāi)始想辦法了：用JS去模擬，貌似這個(gè)可行！
但是如果用戶禁用腳本呢？唉，能否有一個(gè)簡(jiǎn)單的處理方式呢？
經(jīng)過(guò)一番試驗(yàn)，重構(gòu)組的同學(xué)想到一個(gè)方案，哈哈，純CSS實(shí)現(xiàn)，代碼很簡(jiǎn)單的哦。
方案如下：
默認(rèn)情況下，瀏覽器中的芙蓉姐姐（文件上傳域）是這個(gè)樣子的：
美化后呢？哎呦喂，經(jīng)過(guò)重構(gòu)后的芙蓉脫胎換骨哦！
好啦，不賣關(guān)子了，上代碼。
HTML
<FORM><A class=btn_addPic href="javascript:void(0);"><SPAN><EM>+</EM>添加圖片</SPAN> <INPUT class=filePrew title=支持jpg、jpeg、gif、png格式，文件小于5M tabIndex=3 type=file size=3 name=pic></A></FORM>
CSS
*{margin:0;padding:0;}
a{text-decoration:none;}
.btn_addPic{
display: block;
position: relative;
width: 140px;
height: 39px;
overflow: hidden;
border: 1px solid #EBEBEB;
background: none repeat scroll 0 0 #F3F3F3;
color: #999999;
cursor: pointer;
text-align: center;
}
.btn_addPic span{display: block;line-height: 39px;}
.btn_addPic em {
background:url(http://p7.qhimg.com/t014ce592c1a0b2d489.png) 0 0;
display: inline-block;
width: 18px;
height: 18px;
overflow: hidden;
margin: 10px 5px 10px 0;
line-height: 20em;
vertical-align: middle;
}
.btn_addPic:hover em{background-position:-19px 0;}
.filePrew {
display: block;
position: absolute;
top: 0;
left: 0;
width: 140px;
height: 39px;
font-size: 100px; /* 增大不同瀏覽器的可點(diǎn)擊區(qū)域 */
opacity: 0; /* 實(shí)現(xiàn)的關(guān)鍵點(diǎn) */
filter:alpha(opacity=0);/* 兼容IE */
}
現(xiàn)在我們來(lái)看看瀏覽器中的表現(xiàn)是否一致呢？
給力哦！
最近有朋友反饋：在不同瀏覽器下，文件上傳域的可點(diǎn)擊范圍大小不一。 針對(duì)此問(wèn)題，我們可以對(duì) input file 設(shè)置一個(gè)較大的字號(hào) 以此達(dá)到提高可用性的目的。
但是，新問(wèn)題來(lái)了，不同瀏覽器下，當(dāng)鼠標(biāo)進(jìn)入可點(diǎn)擊范圍時(shí)鼠標(biāo)的形狀（cursor）又各不相同,即便設(shè)置 cursor:pointer; 也不管用！苦逼的前端，繼續(xù)測(cè)試吧！
相關(guān)文章
文件上傳input file簡(jiǎn)便美化方案(css)
文件上傳input在各個(gè)瀏覽器里表現(xiàn)形式都不一樣,這里通過(guò)css樣式控制，盡量在多瀏覽器中的表現(xiàn)都一樣2013-01-10
css input[type=file] 樣式美化(input上傳文件樣式 )
這篇文章主要介紹了css input[type=file] 樣式美化(input上傳文件樣式 )的相關(guān)資料,需要的朋友可以參考下2018-06-20
