[JS][前端]修改文件input为button样式

偏执的太偏执、 2022-05-17 09:59 230阅读 0赞

> 问题描述

在开发的时候，遇到了需要提交表单文件的需求，但是原生`<input>`标签特别不好看，而且还有点击提交文件的提示，这样很影响美观，于是便想着更改`<input>`为`<button>`按钮。

> 解决方案

1.  建立一个button按钮，在其上面覆盖表单框，且设置表单的透明度为0，这样虽然用户看到的是button，但是点击的确实
2.  将隐藏，当点击button的时候，去触发的点击，用户点击的是button，但是触发的是input的事件。

> 实现方案

1.  设置input透明度为0的方法

<input class="file" accept="image/*" name="file" type="file">
    <input class="btn" id="submit" value="点击拍照上传" type="button">

对应的css样式

.file { width: 150px; height: 50px; position: absolute; top: 50px; left: 30%; z-index: 1; opacity: 0; }
    .btn { width: 150px; height: 50px; font-size: 16px; color: #fff; background: #28abde; border-radius: 5px; position: absolute; top: 50px; left: 30%; }

这种方法是加了一层看不见的input，用户看到的是button，但是点击的却是input，在网站攻击的时候也可能会用到这种方法，当用户误以为点击了底层的元素，但是实际上点击的顶层看不见的元素，导致泄密。

1.  设置input不可见，并由button去触发。

<form name="form1">
    　<input type="file" name="picpath" id="picpath" style="display:none;" onChange="document.form1.path.value=this.value">
    　<input type="button" value="上传文件" onclick="document.form1.picpath.click()"> 
    </form>

当用户点击button按钮的时候会触发click事件，当文件域的值改变时同时修改对应表单内的值。

发表评论取消回复

表情：

评论列表（有 0 条评论，230人围观）

还没有评论，来说两句吧...

相关阅读

相关 button样式

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

刺骨的言语ヽ痛彻心扉/ 2022年12月03日 12:55/ 0 赞/ 164 阅读

相关用css样式修改input控件和button控件

input中的text submit button等和单独button控件可以用css修改外观 eg: <style> .item\_submit

怼烎@/ 2022年07月11日 09:11/ 0 赞/ 268 阅读

相关修改提交文件的input类型为file控件的样式

这个控件的样式，我想是一直被人鄙视的，丑的不能再丑了，今天终于找到一个方法可以修改它的默认样式。代码如下所示： <!DOCTYPE html> <html l

深藏阁楼爱情的钟/ 2022年06月12日 04:45/ 0 赞/ 219 阅读

相关修改样式input rido

css input checkbox和radio样式美化在之前的一篇文章中，我已经介绍了input file[上传按钮的美化][Link 1]，地址：[htt

悠悠/ 2022年06月04日 08:27/ 0 赞/ 253 阅读

相关 [JS][前端]修改文件input为button样式

> 问题描述在开发的时候，遇到了需要提交表单文件的需求，但是原生`<input>`标签特别不好看，而且还有点击提交文件的提示，这样很影响美观，于是便想着更改`<input>

偏执的太偏执、/ 2022年05月17日 09:59/ 0 赞/ 231 阅读

相关 input[type="file"]样式修改

默认情况下，html中的<input type="file"/>标签展示的效果是自带的，为了美观和体验，我们需要对他进行一番修饰，让他看起来，更加的优雅。修饰的思路是，让一个按

青旅半醒/ 2022年03月21日 04:52/ 0 赞/ 457 阅读

相关修改input输入框的样式

直接上代码 <style> .input{ -web-kit-appearance:none; -moz-appearance: n

Love The Way You Lie/ 2021年12月24日 15:39/ 0 赞/ 705 阅读

相关响应式button按钮样式修改

.button{ padding: .3em .8em; border: 1px solid rgba(0,0,0,.1); backgroun

╰+哭是因爲堅強的太久メ/ 2021年12月15日 06:51/ 0 赞/ 291 阅读

相关修改el-input样式

HTML代码： <el-input class="textarea" placeholder="请输入用户名" auto-complete="on"></el-inp

港控/mmm°/ 2021年09月30日 02:50/ 0 赞/ 1108 阅读

相关修改el-button的样式

HTML代码： <el-button type="primary" >登录</el-button> css代码： <style scoped> .el-b

悠悠/ 2021年09月30日 02:48/ 0 赞/ 1012 阅读