美化type=file控件

对于type="file"而言是一个不大好看的控件。如果不美化他一下，总感觉自己的网站有些缺乏了美感

上代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义input type="file" 的样式</title>
<style type="text/css">
body{ font-size:14px;}
input{ vertical-align:middle; margin:0; padding:0}
.file-box{ position:relative;width:340px}
.txt{ height:22px; border:1px solid #cdcdcd; width:190px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px; }
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
</head>
<body>
<div class="file-box"><form action="" method="post" enctype="multipart/form-data"><input type='text' name='textfield' id='textfield' class='txt' />  <input type='button' class='btn' value='浏览...' /><input type="file" name="fileField" class="file" id="fileField" size="28" οnchange="document.getElementById('textfield').value=this.value" /><input type="submit" name="submit" class="btn" value="上传" /></form>
</div>
</body>
</html>

样式说明：

　上面的是用了一个text和一个按钮去伪装成了一个type="file"控件；实则控件本身为隐藏状态；

而怎么实现点击即点控件，就用到了绝对定位

filter:alpha(opacity:0);opacity: 0; 前者是适合ie8一下的浏览器用于过滤用的，后者用现在的很多的浏览器。这个值趋近于0基本就是透明状态了

转载于:https://www.cnblogs.com/yaobolove/p/6044674.html

美化type=file控件相关推荐

Html input file控件使用accept过滤限制的文件类型
Html input file控件使用accept过滤文件 ,老的浏览器不支持,不过对应新的浏览器还是方便很多 <input type="file" accept=" ...
node-red教程3.3 file控件介绍
File节点分为两种,功能分别是file in与file out ##3.3.1 file的说明信息 File in 控件读取文件的内容,输出为字符串或二进制缓冲区. 输入字符串形式的文件名如果 ...
python界面设计实例qt_python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例...
在默认情况下,我们使用PyQt5创建出来的窗口和部件都是默认的样式,虽然谈不上很丑,但是也毫无美感可言.其实,在PyQt5中,我们可以有较高的自由度来自定义窗口和各种小部件的样式,通过自定义这些样式, ...
input file控件使用accept过滤限制的文件类型
在文件上传控件(input type='file')中,可以通过accept属性实现对文件类型的过滤. 一.相关代码: 下面给出对应的文件上传控件代码: <input type="fi ...
Qt美化之基础控件美化
目标:只使用CSS的方式,展示每种控件的可美化内容和细节. 文中使用的CSS样式都是通过如下代码的方式加载到窗口中,文件以UTF-8进行存储. QDir::setCurrent(QApplicatio ...
Android美化插件,Android控件美化Shape
Android控件美化Shape你会用吗? -- 未审核编辑文档如果你对Android系统自带的UI控件感觉不够满意,可以尝试下自定义控件,我们就以Button为例,很早以前Android12 ...
照片美化和处理控件ColorSwap详细介绍
ColorSwap是一款图形处理工具控件,可以对任何的数码图片进行颜色处理,并且保持原有图片的光泽和阴影以HSV颜色空间进行先进的图像处理,使用该工具不仅可以极其容易地改变色调.饱和度等,还可以使用 ...
实现WinForm窗体的美化(借助第三方控件)
在winform项目中,其实皮肤就是一个第三方的控件,名字是IrisSkin4.dll只要添加到你的工具箱里就可以和其它控件一样使用了一.添加控件IrisSkin4.dll.方法: 先把IrisSk ...
Ajax+Input的File控件上传时的超级简单实时进度条
Html代码: <input id="inputFile" name="inputFile" type="file" />< ...

美化type=file控件

美化type=file控件相关推荐

最新文章

热门文章