企业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,样式,...
江苏交通携手百度地图标注实时发布暴雨路况信息
6月30日至7月4日上午,江苏中南部地区持续出现强降雨,局部超过500毫米。据气象部门...
南京400电话申请价目表(南京400电话怎么办理)
南京400电话申请价目表(南京400电话怎么办理) 400电话是企业服务的重要组成部分,为...
喜推打造领先的智能小程序+智能电话机器人SAA
随着人工智能语音技术的成熟,电话机器人市场迎来了爆发期,有效解决了人工客服的...
昆明电商专用电销机器人在哪可以办理-价格靠谱
昆明电商专用电销机器人在哪可以办理广州网络电话系统平台又是什么?所谓网络电话呼...
电销机器人系统(电销机器人系统使用教程)
本文目次一览: 1、电销呆板人是什么呢?为什么此刻越来越多的企业初步用电销器人...
外呼软件排名最好的是哪些(外呼软件排名最好的是哪些
本文目录一览: 1、外呼体系哪家公司做的好?2、好的电销呼叫软件渠道有哪些?3、智...
贵阳智能营销系统电话
营销电话避免封号,不是没有办法。目前企业之中用到多一是电销卡,二是电销系统。...
中高端服务外包人才来锡创业可获安家费补贴
无锡服务外包企业若获得世界500强企业的大额外包合同,本地工业企业若向123计划企业...
windows10精简极速版:一图看懂Win10 S与Win10专业版/家庭版的
5月3日消息微软5月2日发布了全新的Windows10 S系统,其实这款Win10 S是Win10专业版的特殊配...
驰名商标保护条款
1)对驰名商标的保护,《公约》第六条之二作了明确的规定但一个商标是否驰名要由各有...
汽车化身智能车联网全靠物联网卡
物联网技术下的车联网跨越了汽车、交通运输、信息技术、通讯、消费电子、工业电子...
电话销售系统-白名单电销卡办理
电话销售系统-白名单电销卡办理巨人网络通讯主营企业通信业务,专售电销卡、电销专...
怎样才能确保400电话申请后更好的使用
一款产品是否得到认可,后续使用的时候不出现任何烦恼需要人花费精力处理,就是是...
电销机器人好用吗?能做什么
电销机器人,又叫作智能电话机器人,是一款可以有效拨打客户电话的智能语音系统。...
南京电销机器人好用吗知乎(南京电销机器人好用吗知乎
本文目次一览: 1、南京硅基智能电销呆板人怎样样?有哪些技能劣势? 2、电销呆板人...
定义input type=file 样式的方法
为什么要美化file控件?试想一下,别的孩子都穿戴整齐漂亮,其中两个孩子怎么都不鸟你,太不和谐了。 原始的file控件是这样的: 别以为这个是由一个text和一个button组合成的, 它是定义,input,type,file,样式,...
咨 询 客 服