上传按钮样式优化 <input type="file" />
<html>
<head>
<title>上传按钮样式优化</title>
<style>
.form-element-file-wapper {
position: relative;
width: 100px;
height: 32px;
overflow: hidden;
margin: 0 auto;
}
.form-element-file-wapper button {
width: 100px;
height: 32px;
background-color: #38ADFF;
color: #fff;
}
.form-element-file-wapper input[type=file] {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 32px;
opacity: 0;
cursor: pointer;
font-size: 500px;
}
</style>
</head>
<body>
<div class="form-element-file-wapper">
<button type="button">上传照片</button>
<input type="file" accept="image/jpeg,image/png,image/gif">
</div>
</body>
</html>
<!--
总结:
1.<div class="form-element-file-wapper">作为父元素 style="position: relative;"
2.<input type="file" />置为不可见。 style="position: absolute;" 让元素漂在<button></button>元素上面。用户点击其实就点击这元素。
3.<button type="button">上传照片</button> 作为显示按钮,显示给用户看。
-->
上传按钮样式优化 <input type="file" />的更多相关文章
- html中,文件上传时使用的<input type="file">的样式自定义
Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...
- 有关图片上传的相关知识input type=file,HTML5的 input:file上传类型控制
遇到项目,要求做一个影像系统,对于前端开发需要了解file的相关属性,以及如何开发.工欲善其事,必先利器嘛.度娘一阵子搜索,找资料.这年头,需要的是你解决问题的能力啊! 参考应用:https://ww ...
- input上传按钮的优化
在使用input标签按钮的时候,<input type="file" value="" /> 显示很难看,怎么办? 使用label <li c ...
- type=file的inpu美化,自定义上传按钮样式
<div class="div1"> <div class="div2">点击上传</div> <input type ...
- input按钮上传按钮样式
主要是定位和不透明度来实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- CSS自定义文件上传按钮样式,兼容主流浏览器
解决办法:使用text文本框及a链接模拟文件上传按钮,并且把文件上传按钮放在他们上面,并且文件上传按钮显示透明.1.图片2. [代码][HTML]代码 <div class="b ...
- 兼容IE8的flash上传框架"uploadify"自定义上传按钮样式的办法
(uploadify版本:3.2.1 ) 因为公司业务的原因,所做的项目需要兼容IE8,因此做的上传插件无奈选择的是基于flash的uploadify. 由于是基于flash的,所以使用过程中,难以给 ...
- input type=file实现图片上传,预览以及图片删除
背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...
- jquery判断 input type="file"上传文件是否为空
要想获取type="file"的input内容,用var file = $("id").val();肯定是不行的,下面是代码: html上传按钮为: <i ...
随机推荐
- javascript面向对象知识点
首先,声明何为对象:对象是键值对的集合 其次,声明:变量就是键值对 再次,声明:函数也是变量 1. JavaScript包含:ECMAScript(核心).DOM(文档对象模型)和BOM(浏览器对象模 ...
- 让多个Fragment 切换时不重新实例化、FragmentTabHost切换Fragment时避免UI重新加载
http://www.tuicool.com/articles/FJ7VBb FragmentTabHost切换Fragment时避免UI重新加载 不过,初次实现时发现有个缺陷,每次FragmentT ...
- C++11 不抛异常的new operator
在google cpp style guide里面明确指出:we don't use exceptions C++11的noexcept关键字为这种选择提供了便利. C++11以前,提及malloc和 ...
- C++ shared_ptr deleter的实现
#include <iostream>#include <memory>using namespace std; #include<iostream>class s ...
- 为什么socket编程要用到多线程
不得不佩服计算机先驱的设计:socket编程为什么需要多线程.如果只有一个ServerSocket线程,那么如下代码: public void start() throws Exception { S ...
- Ubuntu 升级VisualBox后无法启动 Kernel driver not installed (rc=-1908)
VisualBox之所以在Linux上比传统的VMware快得多,关键一点就是它和Linux内核的结合比较紧密,这也是开源的优点. 不过Linux内核更新很频繁,每次更新内核后启动VirtualBox ...
- Planning for a period of time
After a period of struggle , i decided to follow the teacher Chen learning . Say true i really disli ...
- MATLAB连接MySQL数据库
今天开始看<MATLAB数据分析与挖掘实战>,学习了下用MATLAB连接MySQL数据库,环境win7,32bit,MySQL5.7.12,MATLAB2013B 首先,从这里下载驱动的压 ...
- React Native 组件之Image
Image组件类似于iOS中UIImage控件,该组件可以通过多种方式加载图片资源. 使用方式,加载方式有如下几种: /** * Sample React Native App * https://g ...
- HDU 4004
http://acm.hdu.edu.cn/showproblem.php?pid=4004 题意:青蛙过长L的河,只能落在石头上,石头数量是n,给出n个坐标,至多跳m次,求在可以过河的条件下,青蛙跳 ...