自定义上传按钮样式

效果体验:http://runjs.cn/detail/crltmoya

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>

#fileInput1 {
cursor:pointer;
opacity:0;
}

div{
    width:300px;
    height:200px;
    background:blue;
    cursor:pointer;
}

</style>
</head>

<body>
<input type="file" id="fileInput1" name="fileInput1">

<div>点击</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
    $(‘div‘).on(‘click‘, function(e) {
        //alert(1);
        //e.preventDefault();
        $(‘input[type=file]‘).trigger(‘click‘);
    })
</script>
</body>
</html>
时间: 2024-10-12 04:28:32

自定义上传按钮样式的相关文章

自定义上传按钮 &lt;input type=&quot;file&quot; name = &quot;file&quot;/&gt; (将file隐藏在button下)

<!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:

上传按钮样式优化 &lt;input type=&quot;file&quot;&gt;

<html><head><title>test</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-c

input按钮上传按钮样式

主要是定位和不透明度来实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*a upload */ .a-upload { padding: 4px 10px; height: 20px; line-height: 20px; posit

CSS自定义文件上传按钮样式,兼容主流浏览器

1. [代码][HTML]代码 1 <div class="box"> 2 <input type="text" name="copyFile" class="textbox" /> 3 <a href="javascript:void(0);" class="link">浏览</a> 4 <input type="file

CSS自定义文件上传按钮

原文:CSS自定义文件上传按钮 今天一同事问我文件上传按钮的问题,情况是这样的,他页面上有3个按钮,分为左中右三个,左边的位按钮甲,右边的位按钮乙,而中间的就是个文件选择按钮,情况大概是这个样子的: 两边的按钮都有了样式,但中间的选择文件的样式死活调不出来,于是我就同他一块解决,后来经过自己设置width,height折腾无果,再求助google终于找到了解决办法,这个方法是这样的: 用一个标签套着文件域,然后调整文件域外边的元素,设置成按钮样式,然后,在把文件域"隐藏"掉(这里的隐藏

文件上传按钮的用户自定义样式的实现

一般在做 WEB 开发项目的时候碰到文件上传必不可少,但是因为各家浏览器对于 <input type="file"> 标签支持不同所以在各个浏览器下的显示也是不一样的.可能在用户体验方面会形成困扰,今天就给大家介绍一下文件上传按钮的用户自定义样式的实现. 实现原理: 建立两个层,一个层包装 <input type="file"> 以下简称文件按钮层,一个层包装上传文件按钮的自定义样式,以下渐层样式层.设置两个层的大小一致,将文件按钮层设置相对

css input[type=file] 样式美化,input上传按钮美化

我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的,后面文章会总结. 思路: input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能. 代码如下: DOM结构: <a href="javascript:;" class="a-upload"> <input type=

用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮

需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为了代码的简洁所以就开始寻求其他的方法,期间试过uploadify,但是由于样式始终调不出来,最后就放弃了,直到发现这么个小巧的玩意,jQuery File Upload. 本文包含了upload的js实现,html的分析,css的实现等内容,文章末尾有git地址 最简运行时 官网下载的demo有N多

解决WebUploader 上传按钮按F12 才行的问题

遇到了 WebUploader 插件的上传按钮点击无效(此时鼠标在按钮任何位置时,按钮都没变化).按F12 之后才有反应(此时鼠标在按钮任何位置时,按钮颜色都会变深) 的问题,网上查到一些答案,找到了一种测试有效的办法. 首先出现Bug的原因是插件生成[选择文件]按钮的长宽都是0,所以点击不到:需要重新渲染一下网页,而F12正好有渲染网页的功能. 解决办法分以下两步: 1)在页面加一段样式: <style> #filePicker div:nth-child(2){width:100%!imp