海滨擎蟹

web 表单按钮优化 - input file 文件类型按钮优化

前言

公司暂无前端,但需要做一些样式优化,比如文件上传插件。虽然原有的样式不好看,但并不想改,因为原有的弹框以组件形式存在,js 里面拼接 html 代码,修改难度大,还有可能弄巧成拙,得不偿失。

但没办法,谁让我是 php 呢?看中的就是你临时充当前端角色的能力。

优化内容包括了表单按钮,类型 type ="file"。默认的表单按钮比较丑,但除了使用成套的 css 方案(如 Element UI,Bootstrap),一般不会修改原有样式。

实现

给我的设计里,按钮需要调整背景,宽高之类的属性,找到了如下的一个方案:

<input id="upalbum" type="file" size="20" name="upalbum" class="se2" onchange="..."/>
<label for="upalbum"><input class="se1" type="submit" value="选择文件" /> </label>
/* 按钮优化 */
.se2{
    width: 200px;
    height: 36px;
    position: absolute;
    top: 200px;
    left: 54px;
    z-index: 1;
    opacity: 0;
}
.se1{
    width: 200px;
    height: 36px;
    font-size: 16px;
    color: #fff;
    background: #1B72CE;
    border-radius: 18px;
    position: absolute;
    top: 200px;
    left: 54px;
}

.se1:hover {
    cursor: pointer;
}

方案将原生的文件选择按钮透明度调到0,也就是看不见状态。在其旁边新建一个按钮,通过定位的方式,调整按钮位置,使其展示在原生按钮所在区域,有点类似覆盖的意思。最后调整原生的文件选择按钮 z-index 属性,使其上升层级进而能够被点击到。

所以新增加的按钮只作展示,并没有实际意义,真正点击生效的还是原生的按钮。

其中 label for 属性指向原有表单文件选择按钮,但这并没有像表单 radio,checkbox 之类的起什么作用,意思就是完全没有作用。

当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »