html的文件控件<input type="file">样式的改变
一直以来,<input type="file">上传文件标签默认样式都是让人不爽的,使用它多要给它整整容什么的,当然如果用ui插件还比较方便,不能就自己来操刀实践一下!
html:
<a href="javascript:void(0);">
<input type="file" id="fileElem">
</a>
css:
<style>
a{
width:180px;
height:100px;
overflow:hidden;
display:block;
text-decoration:none;
position:relative;
background:#ccc;
}
#fileElem{
position:absolute;
top:;
right:;
background:none;
margin:;
padding:;
cursor:pointer;
width:700px;
height:200px;
font-size:60px;/*这个设置很重要*/
filter:alpha(opacity=0);/*把上传控件的透明度设为0*/
-moz-opacity:;
opacity:;
}
</style>
视图效果:

然后可以自由改变大小,用图片覆盖,或者做其他的修饰
效果在ie,ff,谷歌,欧朋都是一样的,safari没测试。
html的文件控件<input type="file">样式的改变的更多相关文章
- 自定义样式 实现文件控件input[type='file']
一般我们设计的上传按钮都是和整个页面风格相似的样式,不会使用html原生态的上传按钮,但是怎么既自定义自己的样式,又能使用file控件功能呢? 思路是这样的: 1.定义一个相对定位的DIV,按照整成步 ...
- 文件上传input type="file"样式美化
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- ASP.NET控件<ASP:Button /> html控件<input type="button">区别联系
ASP.NET控件<ASP:Button />-------html控件<input type="button">杨中科是这么说的:asp和input是一样 ...
- css input[type=file] 样式美化,input上传按钮美化
css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh
- 知识点:定义input type=file 样式的方法(转)
——“当我们想要用css美化表单的时候,有两个控件就会和前段人员作对,一个是是大名鼎鼎的select,另一个就是我现在要说说的 input type=file” 为什么要美化file控件?试想一下,别 ...
- input[type='file']样式美化及实现图片预览
前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...
- input[type=file]样式更改以及图片上传预览
以前知道input[type=file]可以上传文件,但是没用过,今天初次用,总感觉默认样式怪怪的,想修改一下,于是折腾了半天,总算是小有收获. 以上是默认样式,这里我想小小的修改下: HTML代码如 ...
- input[type=file] 样式美化,input上传按钮美化
<style>.file { position: relative; display: inline-block; background: #D0EEFF; border: 1px sol ...
- CSS <input type="file">样式设置
这是最终想要的效果~~~ 实现很简单,div设置背景图片,<input type="file"/>绝对定位上去再设置opacity:0(透明度为0 ) 直接上代码,希望 ...
随机推荐
- python学习 条件控制
if - else if 条件a : 内容a else : 内容 非a if - elif - else if 条件a : 内容a elif 条件b: 内容b-a else : 内容 非(a∪b) ...
- qt下qmake:提示could not exec '/usr/lib/x86_64-linux-gnu/qt4/bin/qmake': No such file or directory
编译出现的问题解决方法: 打开终端输入,qmake -v,出现错误:qmake: could not exec '/usr/lib/x86_64-linux-gnu/qt4/bin/qmake': N ...
- 2.7 Go channel
channel简单示例 package main import ( "fmt" "time" ) //channel的创建,发送,接收 func channe1 ...
- python3 zip压缩
参考: https://docs.python.org/3/library/zipfile.html https://zhidao.baidu.com/question/149840976436638 ...
- Python学习 day15
一.内置函数(共68个) 1.作用域相关(2) locals(*args, **kwargs) -- 返回本地作用域中的所有名字 globals(*args, **kwargs) -- 返回全 ...
- Linux下用tree命令列出树形图
命令用法: tree 参数: -a 显示所有文件和目录. -A 使用ASNI绘图字符显示树状图而非以ASCII字符组合. -C 在文件和目录清单加上色彩,便于区分各种类型. -d 显示目录名称而非内容 ...
- KMeans实现
KMeans实现 符号 \(K\): 聚类的个数 \(x^{(i)}\): 第i个样本 \(\mu_{1},\mu_{2},...\mu_{K}\): K个中心节点 \(c^{(i)}\): 第i个样 ...
- Spring初始化日志
Spring启动时的日志: 2013-11-22 14:55:59:319[INFO]: FrameworkServlet 'spring3': initialization completed in ...
- js验证营业执照号码是否合规
需求:最近要做实名验证的功能,但是验证我们要验证严谨一点,参考了网上关于营业执照号码规则和一些大侠的代码的代码,总结一下. 营业执照号码规则:规则 代码: //方法一:function checkLi ...
- [转]Entity Framework Fluent API - Configuring and Mapping Properties and Types
本文转自:https://msdn.microsoft.com/en-us/data/jj591617#1.2 When working with Entity Framework Code Firs ...