欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS美化 input type=file 兼容各個瀏覽器

  發(fā)布時間：2012-12-27 10:52:13   作者：佚名   我要評論
在日常重構中，form表單家族中的 upload field 在使用 css 美化時令人頭疼！默認情況下，各個瀏覽器下的表現層次不齊,很是郁悶，于是本人搜集整理了一些常用技巧，需要了解的朋友可以參考下

在日常重構中，form表單家族中的 upload field 在使用 css 美化時令人頭疼！默認情況下，各個瀏覽器下的表現層次不齊！如下圖所示，讓我等情何以堪。

默認情況下input file 在不同瀏覽器中的表現

通常，我們的設計師同學、產品同學都希望文件上傳域能夠在表現上有所突破：點擊頁面中美化過的圖片“選擇文件”就可以完美實現文件上傳域的功能。唉，理想很豐滿，現實很骨感！每當我接到這樣的要求就會淚流滿面，加圖片容易，但它無法工作啊！

好吧，苦逼的前端開始想辦法了：用JS去模擬，貌似這個可行！

但是如果用戶禁用腳本呢？唉，能否有一個簡單的處理方式呢？

經過一番試驗，重構組的同學想到一個方案，哈哈，純CSS實現，代碼很簡單的哦。

方案如下：

默認情況下，瀏覽器中的芙蓉姐姐（文件上傳域）是這個樣子的：

美化后呢？哎呦喂，經過重構后的芙蓉脫胎換骨哦！

好啦，不賣關子了，上代碼。

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; /* 增大不同瀏覽器的可點擊區(qū)域 */
    opacity: 0; /* 實現的關鍵點 */
    filter:alpha(opacity=0);/* 兼容IE */
    }

    現在我們來看看瀏覽器中的表現是否一致呢？

    樣式化 input-file
    給力哦！
    最近有朋友反饋：在不同瀏覽器下，文件上傳域的可點擊范圍大小不一。 針對此問題，我們可以對 input file 設置一個較大的字號 以此達到提高可用性的目的。

    但是，新問題來了，不同瀏覽器下，當鼠標進入可點擊范圍時鼠標的形狀（cursor）又各不相同,即便設置 cursor:pointer; 也不管用！苦逼的前端，繼續(xù)測試吧！

    相關文章

    最新評論