input file 美化
<input type='file'>的默认外观实在难看,绝大多数情况都需要对其美化。找了很多资料,目前发现以下方式是最简单的美化方式。
1.将file input用label包裹起来,然后给这个label增加我们想要的样式。
2.给input增加样式:
style="left:-9999px;position:absolute;"
3.label内增加显示文本
<span>上传文件</span>
完整代码:(点击查看demo)
<label class="upload_btn" for="file">
<input type="file" id="file" name="" style="left:-9999px;position:absolute;">
<span>上传文件</span>
</label>
这是label标签特性,可将事件传递到目标标签,如不加for属性,默认传递到第一个标签。
input file 美化的更多相关文章
- input file 美化的方法
css input[type=file] 样式美化,input上传按钮美化 2014年8月29日 113210次浏览 由于明天公司组织出去游玩,今天把这两天的博客都写了吧,今天的内容是input[ty ...
- input file美化,文件上传
此文学习至:http://www.haorooms.com/post/input_file_leixing 然而只会用,不会做,UI泪茫茫 效果图: 原图: 美化后: 此主要用css美化表单,然后用J ...
- input file美化
<style> a{display:inline-block; width:100px; height:40px; position:relative; overflow:hidden;} ...
- Input file 文本框美化
HTML原生的input file 上传按钮有多(无)不(力)漂(吐)亮(槽)我就不多说了.大家几乎在项目中都会有遇到图片.等文件需要上传的地方,好看的文件上传按钮会使人身心愉悦(我瞎说的).好了不多 ...
- 伪触发 input file 的click事件
前端在做 input file 美化的时候,通常 把 input 定位position 到 已美化的按钮最上方 opacity: 0 HTML5时代,已有更方便的方法,点击美化按钮直接触发选择文件事件 ...
- ie浏览器下HTML上传控件input=file的美化
近期写东西用到了input=file这个按钮,给其添加背景,在其它浏览器上都可以正常的显示,可一到ie上便不听话了,完全没有添加上,显的很难看.今天在网上找到一方法,试过后感觉很好,终于把这个问题给解 ...
- input file 文件上传标签的样式美化
input file 文件上传标签的样式美化 将<input type="file">的透明度设置为0: <input type="file" ...
- input file样式美化
默认样式: <input type="file" /> 美化样式时: 将其设置为透明,设置宽高覆盖到需要用的地方,宽100%,高100% 可以用到定位 .box{ po ...
- ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
随机推荐
- JS 对话框 语法
javaScript 是个脚本语言,没有能力独立执行,必须要有宿主文件 html, 作用 进行数据运算 控制浏览器的一些功能(对一下高级浏览器的影响有限) 控制元素(属性,样式,内容等) 一 用法 ...
- Hibernate Tools for Eclipse的使用
Hibernate Tools的官方网站:http://hibernate.org/tools/Step1.安装好Hibernate Tools,建立一个Dynamic web project,工程名 ...
- extJs常用的四种Ajax异步提交
/** * 第一种Ajax提交方式 * 这种方式需要直接使用ext Ajax方法进行提交 * 使用这种方式,需要将待传递的参数进行封装 * @return */function saveUser_aj ...
- vscode 自动提示Threejs
转自:https://blog.csdn.net/github_39125824/article/details/82633993 1.首先,你要安装Node.js 2.在vscode的 查看-> ...
- springboot中使用mybatis之mapper
Spring Boot中使用MyBatis传参方式:使用@Param@Insert("INSERT INTO USER(NAME, AGE) VALUES(#{name}, #{age})& ...
- Springboot — 用更优雅的方式发HTTP请求(RestTemplate详解)
RestTemplate是Spring提供的用于访问Rest服务的客户端,RestTemplate提供了多种便捷访问远程Http服务的方法,能够大大提高客户端的编写效率. 我之前的HTTP开发是用ap ...
- MVC Helper Methods
在.net MVC中经常会见到特别的写法 比如 @Url.Action( ) @Url.Conyent( ) @Html.Displayfor( )等等 这些 写法就是我们这里要讲的 Helper ...
- php中的static静态变量
今天碰到了一个php的小试题,一直没有明白为什么第三次循环是static静态变量没有起作用呢?想了好久才明白原理. <?php class MyClass{ function add($b){ ...
- css语法和基本知识
1.CSS全称为“层叠样式表”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 注:使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体 ...
- short、int、long、float、double区别
一.基本数据类型的特点,位数,最大值和最小值.1.基本类型:short 二进制位数:16 包装类:java.lang.Short 最小值:Short.MIN_VALUE=-32768 (-2的15此方 ...