给上传文件的input控件“美容”
在工作中经常会遇到form表单这种东西。然而表单的其他input控件样式还是很好改变的。但是，唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮。
demo:
html代码
<body>
<form action="" method="post" enctype="multipart/form-data">
<a href="#" class="a-upload">
<input type="file" name="file" id="file">点击这里上传图片</a>
</form>
</body>
css代码
<style>
.a-upload {
padding: 4px 10px;
width: 200px;
height: 30px;
box-sizing: border-box;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1;
top: 5px;
} .a-upload input {
position: absolute;
font-size: 100px;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
width: 200px;
height: 30px;
left: 0;
top: 0;
} .a-upload:hover {
color: #444;
background: #eee;
border-color: #ccc;
text-decoration: none
}
</style>
给上传文件的input控件“美容”的更多相关文章
- 给上传文件的input控件"美容"
作为一名前端程序猿呢,在工作中经常会遇到form表单这种东西.然而表单的其他input控件样式还是很好改变的.但是,唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮.刚好菜鸟我最近工 ...
- JS ajaxfileUpload 一次性上传多个input控件 上传多个文件
本方法适用于一次性上传多个input框输入的文件,如下图所示,任务是需要一次上传两个input框提供的两个文件. 具体方法: 1.修改ajax调用方法 如上图所示,只需要将ajaxFileUpload ...
- yii上传图片、yii上传文件、yii控件activeFileField使用
yii框架提供了activeFileField控件来完成上传文件(当然也包括了上传图片)的操作,下面介绍yii的activeFileField使用方法.1.函数原型:public static str ...
- 上传文件 隐藏input type="file",用text显示
<div> <span>上传文件:</span> <input type="file" id="upload_file" ...
- FormData上传文件（input file）
<div> <input type="file" name="FileUpload" id="FileUpload" va ...
- Ajax 上传文件（input file FormData）
FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据.其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用. jQuery Aj ...
- 上传文件的input问题以及FormData特性
1.input中除了type="file"还要加上name="file",否则$_FILES为空,input的name值就是为了区分每一个input的 2.va ...
- 《手把手教你》系列技巧篇（五十四）-java+ selenium自动化测试-上传文件-中篇（详细教程）
1.简介 在实际工作中,我们进行web自动化的时候,文件上传是很常见的操作,例如上传用户头像,上传身份证信息等.所以宏哥打算按上传文件的分类对其进行一下讲解和分享. 2.为什么selenium没有提供 ...
- 《手把手教你》系列技巧篇（五十三）-java+ selenium自动化测试-上传文件-上篇（详细教程）
1.简介 在实际工作中,我们进行web自动化的时候,文件上传是很常见的操作,例如上传用户头像,上传身份证信息等.所以宏哥打算按上传文件的分类对其进行一下讲解和分享. 2.为什么selenium没有提供 ...
随机推荐
- 微软职位内部推荐-SW Engineer II for Windows System
微软近期Open的职位: Microsoft's Operating Systems Group delivers the operating system and core user experie ...
- kettle_Spoon 修改共享DB连接带汉字引发的错误
win10下: kettle_Spoon 修改共享DB连接带汉字引发的错误: Unexpected problem reading shared objects from XML file : nul ...
- 哈夫曼(Huffman)树+哈夫曼编码
前天acm实验课,老师教了几种排序,抓的一套题上有一个哈夫曼树的题,正好之前离散数学也讲过哈夫曼树,这里我就结合课本,整理一篇关于哈夫曼树的博客. 主要摘自https://www.cnblogs.co ...
- Beta发布——美工+文案
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2408项目地址:https://coding.net/u/wuyy694/ ...
- “Hello World！”团队第七次Scrum立会
"Hello world!"团队召开第七次Scrum立会.博客内容: 1.会议时间 2.会议成员 3.会议地点 4.会议内容 5.Todo list 6.会议照片 7.燃尽图 一. ...
- 上午做的第一个安卓app
刚开始学习安卓开发,有好多不懂,好多快捷键不知道,好多文件也不知道是干什么用的,初学时的确会有很多烦恼,比如哪里又多一个空格也会报错,有时候错误很难看懂. 嘿嘿,一上午的功夫边学习边调代码,做出了我第 ...
- c# dataGridView排序
一.对阿拉伯数字进行自定义排序: 简单有效方法: 1.该列的sortmode属性为auto...(一般默认) 2.比如首列序号,添加该列数据的时候直接添加int即可.切忌不要用string. obje ...
- 【转】node.js框架比较
我偶然间看到这篇文章,转这个文章并没有什么含义,仅仅是感觉总结的不错,对于新学node的友友们来说希望这篇文章为大家对 Node.js 后端框架选型带来一些帮助,学习不再迷茫,也是让我有个保存,以后参 ...
- vue+vue-video-player实现弹窗播放视频
将视频播放器标签放在对话框标签中,实现弹窗 template 中 <el-dialog :visible.sync="dialogVisible" width='680px' ...
- A9
今日内容: 解决队友提出的问题 明日计划: 商讨界面还有哪些不足的地方 困难: 每天大部分时间被电工实习占走了