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 之类的起什么作用，意思就是完全没有作用。