HTML学习笔记之一（input文件选择框的封装）

深藏阁楼爱情的钟 2022-08-05 02:46 145阅读 0赞

方式一：直接透明隐藏

.file_button_container,.file_button_container input {background: transparent url(./img/BT5AB.png) left top no-repeat;height: 47px;width: 263px;}
    
    	       .file_button_container {background: transparent url(./img/BT5AB.png) left top no-repeat;}
    	       .file_button_container input {opacity: 0;}

<div class="file_button_container"><input type="file" /></div>

方式二：覆盖隐藏 js调用

.styled-button {
    				background-color:#25A6E1;color:#fff;font-family:'Helvetica Neue',sans-serif;
    				font-size:14px;	line-height:30px;border-radius:20px;-webkit-border-radius:20px;
    				-moz-border-radius:20px;border:0;width:120px;height:32px
    		    }

function chooseFile() {
    		      $("#fileInput").click();
    		   }

<div style="height:0px;overflow:hidden">
    		   <input type="file" id="fileInput" name="fileInput" />
    		</div>
    		<button type="button" class="styled-button" οnclick="chooseFile();">上传图片</button>

![Center][]

[你可以点击这里获得你想要的按钮样式代码][Link 1]

[Center]: /images/20220805/872fbd5724d046cb8e73addcec6fcf3a.png
[Link 1]: http://onlinecssgenerator.com/css-button-generator.aspx

发表评论取消回复

表情：

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

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

相关阅读

相关 vue中 input输入框的封装

在vue中会将常用的组件进行封装，如下是input输入框的一个封装。 <template> <div class="text_group">

﹏ヽ暗。殇╰゛Y/ 2023年02月17日 06:24/ 0 赞/ 90 阅读

相关兼容input 文件选择_「HTML5」FileAPI 文件操作实战

> 本文来自《FileAPI 文件操作实战》 > 其他系列放在了Github，欢迎交流和Star 介绍 HTML5 为我们提供了 File API 相关规范。主要

深藏阁楼爱情的钟/ 2022年11月19日 11:20/ 0 赞/ 131 阅读

相关 HTML中input多选框

<form action=""> 车型： <input type="checkbox" name="car" value="car1">雅阁 <

绝地灬酷狼/ 2022年11月03日 15:29/ 0 赞/ 152 阅读

相关 html input批量选择文件路径,你不知道的 input 之文件选择（accept、capture、multiple、webkitdirectory）...

前段时间写了一个上传文件前预览的功能，用于 pc 端。这次又要测试一下移动端的兼容性，在客户端内使用。正好整理一下，先上测试地址：DEMO 地址，目前有这些功能。动态设

待我称王封你为后i/ 2022年10月06日 04:59/ 0 赞/ 549 阅读

相关 HTML学习笔记之一（input文件选择框的封装）

方式一：直接透明隐藏 .file_button_container,.file_button_container input {background: tr

深藏阁楼爱情的钟/ 2022年08月05日 02:46/ 0 赞/ 146 阅读

相关 html日期选择框

![在这里插入图片描述][20191229011856117.png] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

柔情只为你懂/ 2022年06月08日 14:15/ 0 赞/ 216 阅读

相关前端学习笔记之一HTML

两种文档的区别 1、文档声明和编码声明 sublime中快捷键 html:xt + tab html:5 + tab 或者 ! + tab 2、html5

小灰灰/ 2021年10月19日 22:12/ 0 赞/ 387 阅读

相关 vue + element-input封装数字框

因业务需要，要求一个数字框，现有的element的input不太符合要求，遂动手封装了一个，封装后仍能调用原<el-input>事件。功能：仅能输入合法整数和小数格式，默认

川长思鸟来/ 2021年09月25日 02:34/ 0 赞/ 218 阅读

相关 HTML5 - 限制input file 可选择的文件类型

前言实现选择文件并上传的功能时，都会用到 input file 控件。 `<input id="inputFile" type="file" />`

比眉伴天荒/ 2021年09月18日 13:56/ 0 赞/ 545 阅读

相关 HTML input password 密码框

HTML input password 密码框将 `<input>` 标签 type 属性值设置为 "password" 即可创建一个密码框。密码框是一种特殊文本框，...

小灰灰/ 2020年05月16日 18:30/ 0 赞/ 810 阅读