为input=file 控件添加背景图片

最新推荐文章于 2022-05-15 17:07:34 发布

saber_6789

最新推荐文章于 2022-05-15 17:07:34 发布

阅读量2.6k

点赞数 1

分类专栏： HTML 文章标签： css input-file html 背景

本文链接：https://blog.csdn.net/saber_6789/article/details/52671465

版权

本文介绍了如何通过HTML和CSS技术为`input=file`控件添加背景图片，利用`label`的`for`属性实现点击背景图片即可触发文件上传，并通过设置`display: none`隐藏原始控件，以达到美化效果。该方法已在Chrome浏览器中测试成功，预计在主流浏览器上都能正常工作。

摘要由CSDN通过智能技术生成

html代码

<div class="image-upload">
    <label for="file-input">
        <img src="placeholder.jpg"/>
    </label>

    <input id="file-input" type="file"/>
&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

saber_6789

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

自定义input type=file 样式美化input type=file 改变input type=file控件“丑陋面貌”

哪一站

12-24

5455

自定义input type=file 样式，美化input type=file 改变input type=file控件“丑陋面貌”

图片的上传及给控件设置背景图片

06-11

可以从桌面的其他盘中上传图片，并且可以将其设为背景图片图片，同时可以选择图片的展开位置。

1 条评论您还未登录，请先登录后发表或查看评论

input输入框载入背景图片

caneli的博客

08-19

1万+

做第一个input输入框，载入背景图片的时候遇到输入框坍缩，只有一个背景图片大小。如下： input输入框设置了宽高也无法解决。解决方法：多设置一个div来存放背景图片，并设置绝对定位。同样，今天做二级导航，加载背景图片后，就只有图片，背景颜色消失，目前还不知道原因，先记着，以后学懂了再来修改。

HTML控件Input（File)中如何把浏览按钮的背景更换成图片

zgmzyr的专栏

04-01

1万+

使用CSS样式来控制就可以了啊,你可以这么写: 不过这里要注意图片的路径啊,这里是相对路径 =================== #input1{border:1px solid #0000FF} #btn1{width:70px;height:21px;font-size:12px;padding-top:3px;border-left:1px solid #FFFFF

JS——图片处理（input type='file'）演练

Domesteven的博客

09-23

919

今天我们就玩一下怎么在我们的网页中像更改头像一样更换图片效果图如下：当点击左边的图片，就弹出选择框，可以选择想要的图片将原图替换，是不是很实用，接下来就看看怎么实现的吧 1、body部分 <body> <div id="divimg"> <img src="1.png" id="imgview"/> <i

input里面添加图片

热门推荐

heromps的博客

01-13

2万+

input里面添加图片思路：利用input背景图片来实现，主要使用的是css样background-image l利用background-image引入图片，background-image: url(/images/teststair/7-日历.png); 利用background-repeat去除背景图片重复， background-repeat: no-repeat; 利用background-position来设置图片位置， background-position: 80px; 具体实现：

定义input type=file 样式的方法

12-14

原始的`file`控件通常呈现为一个简单的文本框和一个"浏览"按钮，其外观朴素且难以与页面其他元素融合。通过自定义CSS样式和HTML结构，我们可以改变这一状况，使其与其他元素保持一致。要美化`file`控件，一种常见...

关于input的file 控件及美化

12-14

美化file控件 .file-box { position: relative; width: 340px; } .txt { height: 22px; border: 1px solid #cdcdcd; width: 180px; } .btn { background-color: #FFF; border: 1px solid #CDCDCD; ...

HTML input type=file文件选择表单元素.docx

11-22

HTML5 之前的 input type=file 元素只能一次上传一张图片，无法满足一次上传多图的交互需求。因此，许多场景下，使用 swfupload.js 来代替原生的 file input 表单元素。二、HTML5 中的 input type=file 文件选择...

js 特效 html 特效 INPUT框中的背景图片

06-13

js 特效 html 特效 INPUT框中的背景图片

html中input中加图片,css怎么在input里插图片？

weixin_35399893的博客

06-01

9299

一般的搜索框前面都会有一个搜索图标，今天我们就来看看实现的方法吧。css怎么在input里插图片？1、在包含input的div中设置子元素2、设置外层div定位为relative.search{position: relative;}(推荐学习：CSS视频教程)3、设置span定位为absolute，并设置宽高和背景图片.search > span{position: absolute;di...

html中文本框加背景图片

系统运维

09-21

2863

<inputtype="text"style="background-color:#ccc;color:yellow;font-size:11pt"> <inputtype="text"style="background-image:url('banner.jpg')"> <input type="text" id=

input中加入图片的做法

weixin_34200628的博客

08-29

3798

有很多高大上的网站中都有这一做法。尤其是在登录页面，输入用户名和密码时加入小图标，看起来简单舒服。下面就列举一下我们公司中手机网站应用的截图：怎么样看起来还不错吧。下面直接上代码： <!DOCTYPE html> <html> <head> <title>input中加入图片的做法</ti...

美化文件域input type=file的样式

肖肖肖丽珠的博客

03-24

5516

原理是：把这个input type=file的设置的不出现在屏幕中的可见区域内，然后用一个button出现，这个button就相当于原来type=file的那个选择文件的按钮。点击button就触发原来的选图片。在最外层给他添加一个背景图片。这个图片的样式就是type=file的样式。简而言之，用那个背景图代替按钮，那个button代表 fileInput left"

用图片替换input file 的样式（上传图片文件图标）

wbj16116的博客

04-14

1万+

把input 设为透明的。后面放一张图片 <label> <input style="position:absolute;opacity:0;" type="file" name="file" id="Album_img" ...

头像，背景图片上传详解

untilyouydc

02-26

2201

头像，背景图片上传详解上传头像和上传背景图片的思路都是一样的，所以这里选讲一下上传头像就行。上传头像页面样式：上传头像主要分成两大部分：上传后，将图片存储在本地项目中，然后将图片的url存储到数据库里面，这样以后就可以根据数据库的地址来加载图片了。图片剪切功能，图片的剪切功能是使用了jquery的开源插件cropper。这个你百度一下就可以去github里面看到了。当你截取好图片...

如何为form表单input提交按钮加背景图片

云隐雾匿的博客

05-15

1377

例如： <form id="myform" name="myform" action="" method=""> <input type="submit" name="submit" value="点我一下"> </form> 方法一： <form id="myform" name="myform" action="" method=""> <input type="image" src="" name="submit" /> </