利用css对input[type=file] 样式进行美化，input上传按钮美化

2019独角兽企业重金招聘Python工程师标准>>>

<input type="file" name="fileUpload"/>

的效果是这样的：

利用css可以变成如下效果：

demo:

<!DOCTYPE html>
<html><head><title>demoInput.html</title><meta name="keywords" content="keyword1,keyword2,keyword3"><meta name="description" content="this is my page"><meta name="content-type" content="text/html"><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"/><style>#fileUpLoadBox{ position: relative; width: 1050px; height: 100px; background-color: #9ebde0;; background-position: 0 0; background-attachment: scroll; line-height: 37px; text-align: center; color: white; cursor: pointer; overflow: hidden; z-index: 1; } #fileUpLoadBox input { position: absolute; width: 1050px; height: 100px; line-height: 40px; font-size: 23px; opacity: 0; filter: "alpha(opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; left: -5px; top: -2px; cursor: pointer; z-index: 2; } </style></head><body><br><div><form role="form" id="fileUploadForm" enctype="multipart/form-data" class="col-md-offset-1"><div class="form-group"id="fileUpLoadBox"><input type="file" name="uploadFile" id="InputFileEditor" class="field"/><h3>点击选择文件</h3><h1><i class="fa fa-fw fa-cloud-upload"></i></h1></div></form><div class="box-footer"><div id="showFileName" class="col-md-offset-4"></div><button type="submit" class="btn btn-primary col-md-offset-4 col-md-3" id="imsiFileUploadSubmit">上传</button></div></div></body>
</html>

转载于:https://my.oschina.net/AnymoreCoder/blog/759504

利用css对input[type=file] 样式进行美化，input上传按钮美化相关推荐

css input[type=file] 样式美化，input上传按钮美化
思路: 原文出处:http://www.haorooms.com/post/css_input_uploadmh input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0, ...
html选择文件按钮美化,css input[type=file] 样式美化，input上传按钮美化
我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的,后面文章会总结. 1. 思路 inp ...
自定义input type=file 样式的方法
为什么80%的码农都做不了架构师?>>> 为什么要美化file控件?试想一下,别的孩子都穿戴整齐漂亮,其中两个孩子怎么都不鸟你,太不和谐了. 原始的file控件是这样的: &l ...
input type=file 获取选择文件名称、路径方法及input上传按钮美化
获取文件名 document.getElementById('upload').files[0].name; 获取文件路径 document.getElementById('upload').valu ...
input美化上传按钮美化
今天工作需求碰到样式改变上传按钮效果: <a href="javascript:;" class="a-upload"><input ty ...
input type=file /，美化自定义上传按钮
上传的按钮实在是太丑了,今天看了别人的文章,自己找了找资料,琢磨了一下,结果如下. 图片如下: 代码如下,粘贴即可以用: @{ViewBag.Title = "IndexInput" ...
Html5 填表表单(二) input type 各种输入, 各种用户选择,上传等等泛输入用户交互
<input> 无限制输入 type 限制输入 type = 如下类型 type 后还可以跟一些属性: 如<input type=text maxlength = ...
＜input type=“file“＞实现上传文件
嗨害嗨,我又来了奥.今天讲一个项目中常见的例子,就是利用input type="file"来进行表单上传文件.首先,我们写好html,如下. <form id="f ...
input[type=file]属性
title: input[type=file]属性 date: 2017年8月11日 21:04:48 tags: html categories: 教程 author: "JiaWei&q ...

利用css对input[type=file] 样式进行美化，input上传按钮美化

利用css对input[type=file] 样式进行美化，input上传按钮美化相关推荐

最新文章

热门文章