企业400电话
微网小程序
AI电话机器人
电商代运营
全 部 栏 目
企业400电话
网络优化推广
AI电话机器人
呼叫中心
网站建设
商标✡知产
微网小程序
电商运营
彩铃•短信
增值拓展业务
定义input type=file 样式的方法
为什么要美化file控件?试想一下,别的孩子都穿戴整齐漂亮,其中两个孩子怎么都不鸟你,太不和谐了。
原始的file控件是这样的:
别以为这个是由一个text和一个button组合成的,
它是一个控件
,html代码为:
复制代码
代码如下:
<input type="file" name="file" />
既然这样我们就用一个text和一个button来显示这个file的样式,html代码是这样:
复制代码
代码如下:
<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" onchange="document.getElementById('textfield').value=this.value" />
<input type="submit" name="submit" class="btn" value="上传" />
</form>
</div>
外面的一层div是为了给里面的input提供位置参考,因为写样式的时候需要相对定位,使真正的file控件覆盖在模拟的上面,然后隐藏掉file控件(即使file控件不可见),所以css代码是这样的:
复制代码
代码如下:
.file-box{ position:relative;width:340px}
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.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 }
效果图:
最后留下一个DEMO:点击查看demo
<!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:180px;}.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" onchange="document.getElementById('textfield').value=this.value" /> <input type="submit" name="submit" class="btn" value="上传" /> </form></div></body></html>
提示:您可以先修改部分代码再运行
上一篇:
td单元格合并时 td宽度问题
下一篇:
html页面中常用的一些小方法整理
相关文章
定义input type=file 样式的方法
为什么要美化file控件?试想一下,别的孩子都穿戴整齐漂亮,其中两个孩子怎么都不鸟你,太不和谐了。 原始的file控件是这样的: 别以为这个是由一个text和一个button组合成的, 它是定义,input,type,file,样式,...
硅谷初创公司Strip联手支付宝和微信 拓展中国市场
【TechWeb报道】7月10日消息,据国外媒体报道,硅谷初创公司Stripe与数字支付提供商支付...
400电话品牌效应大于广告效果
如果还单一依靠这个渠道去推销产品,那就等于走上了坎坷路,必然前进艰难。现在人...
南昌ai外呼系统代理(ai电销外呼系统多少钱一个月)
今日给各位共享南昌AI外呼体系署理的常识,其间也会对ai电销外呼体系多少钱一个月进...
使用电销卡会出现哪些通话问题?
电话销售需要每天拨打大量的营销电话,因此都会选择使用电销卡,能满足电销人员的...
linux命令大全之telnet命令详解(linux远程登录)
telnet命令通常用来远程登录。telnet程序是基于TELNET协议的远程登录客户端程序。Telnet协...
企业公司网站运营方法,遵守这几点网站维护很简单
网站代运营浅显易懂便是帮您经营网站,维护保养好一个网站的经营,不仅需要每天更...
芜湖市机器人电销外包公司(芜湖智能机器人)
本文目录一览: 1、电话营销外包公司?2、有谁用过电销机器人?哪个公司的比较好?...
常州云外呼系统一般多少钱(常州外呼系统)
本文目录一览: 1、外呼体系装置需求哪些费用?2、外呼体系多少钱一个月?3、市面上...
shell字符截取命令之cut命令的实例详解
shell字符截取命令之cut命令的实例详解 一 语法 cut [选项] 文件名选项:-f 列号:提取第...
广西电话机器人供应商(广西呼呐机器人科技有
本文目录一览:1、有谁用过 电话机器人?哪个公司的比较好?2、智能 电销机器人哪个...
(为何要进行400电话申请)为什么要申请 400 电话
很多公司为了丰富自己的企业形象,会在自己的官网上设立400电话号码。这个号码可以...
德州企业电销机器人供应商(德州电器批发)
本文目录一览: 1、电销机器人公司排名,电销机器人哪家公司做的比较好2、AI智能电...
郑州抗封AXB电销线路多少钱,智能回拨系统-注意!
一企嗨电话营销系统 1.当前的电销场景有哪些困扰? 1)手机.卡频繁被封,电销业务...
dotnetfx.exe是什么进程
dotnetfx.exe 是微软Windows升级到.net技术的一个进程(又及修复.net框架用的命令),需要安...
Laravel使用消息队列需要注意的一些问题
前言 消息队列对于大型的Web项目来说是必不可少的一个模块,通过消息队列可以解决大...
定义input type=file 样式的方法
为什么要美化file控件?试想一下,别的孩子都穿戴整齐漂亮,其中两个孩子怎么都不鸟你,太不和谐了。 原始的file控件是这样的: 别以为这个是由一个text和一个button组合成的, 它是定义,input,type,file,样式,...
咨 询 客 服