CSS清理 input type=file 适配各个访问器

日期:2020-09-24 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

在平常重构中,form表单大家族中的 upload field 在应用 css 清理时让人头疼!默认设置状况下,各个访问器下的主要表现层级不齐!以下图所示,让我等情缘何堪。

一般,大家的设计方案师同学、商品同学都期待文档提交域可以在主要表现上有一定的提升:点一下网页页面中清理过的照片“挑选文档”便可以完善完成文档提交域的作用。唉,理想化很丰腴,实际很骨感!每当我接到这样的规定就会泪如雨下,加照片非常容易,但它没法工作中啊!

好吧,苦逼的前端开发刚开始想方法了:用JS去仿真模拟,貌似这个可行!

可是假如客户禁用脚本制作呢?唉,能否有1个简易的解决方法呢?

历经1番实验,重构组的同学想起1个计划方案,哈哈,纯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:⑴9px 0;}
    .filePrew {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 39px;
    font-size: 100px; /* 增大不一样访问器的可点一下地区 */
    opacity: 0; /* 完成的重要点 */
    filter:alpha(opacity=0);/* 适配IE */
    }

    如今大家看来看访问器中的主要表现是不是1致呢?


    给力哦!
    近期有盆友意见反馈:在不一样访问器下,文档提交域的可点一下范畴尺寸不1。 对于此难题,大家能够对 input file 设定1个较大的字号 以此做到提升能用性的目地。

    可是,新难题来了,不一样访问器下,当电脑鼠标进到可点一下范畴时电脑鼠标的样子(cursor)又不尽相同,就算设定 cursor:pointer; 也无论用!苦逼的前端开发,再次检测吧!