`

改变文件上传按钮样式 input button

    博客分类:
  • web
CSS 
阅读更多

<style type="text/css">
 div.fileinputs {
 position: relative;
 }

 div.fakefile {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  border:1px solid red;
 }

 input.file {
  position: relative;
  text-align: right;
  -moz-opacity:0 ;
  filter:alpha(opacity: 0);
  opacity: 0;
  z-index: 2;
 }


</style>

<script>

 /*var W3CDOM = (document.createElement && document.getElementsByTagName);

 function initFileUploads() {
  if (!W3CDOM) return;
  var fakeFileUpload = document.createElement('div');
  fakeFileUpload.className = 'fakefile';
  fakeFileUpload.appendChild(document.createElement('input'));
  var image = document.createElement('img');
  image.src='pix/button_select.gif';
  fakeFileUpload.appendChild(image);
  var x = document.getElementsByTagName('input');
  for (var i=0;i<x.length;i++) {
   if (x[i].type != 'file') continue;
   if (x[i].parentNode.className != 'fileinputs') continue;
   x[i].className = 'file hidden';
   var clone = fakeFileUpload.cloneNode(true);
   x[i].parentNode.appendChild(clone);
   x[i].relatedElement = clone.getElementsByTagName('input')[0];
   x[i].onchange = x[i].onmouseout = function () {
    this.relatedElement.value = this.value;
   }
  }
 }
*/
</script>

改变<input type="file">的“浏览”按钮,其实把这个按钮显示成透明的,在它上面盖了一张图片

<form>
 <div class="fileinputs">
  <input type="file" class="file" onchange="alert(this.value);document.getElementById('fileT').value=this.value"/>
  <div class="fakefile">
   <input name="fileT"/>
   <img src="button3.gif" />
  </div>
 </div>
</form>

分享到:
评论

相关推荐

    jquery上传文件点击input上传文件样式代码

    &lt;title&gt;jQuery上传文件样式 .custom-file-input { display: none; } .custom-file-button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-...

    图片代替文件浏览按钮样式

    首先,`&lt;input type="file"&gt;`是HTML中的一个表单元素,用于让用户选择本地文件,通常用于上传文件的功能。默认情况下,它的样式非常简单,可能与网站的其他设计不协调。因此,我们经常需要对其进行自定义,使其与...

    ASP.net开发经典button样式

    在ASP.NET开发中,按钮(Button)控件是不可或缺的一部分,它用于用户与网页进行交互,触发特定的事件。创建经典且美观的button...结合CSS、JavaScript以及ASP.NET控件的特性,你可以打造出满足各种需求的按钮样式。

    只修改input file组件的浏览按钮样式

    本文将详细探讨如何仅修改`&lt;input type="file"&gt;`组件中的“浏览”按钮样式,而不改变文件输入框本身的外观。 #### 一、问题背景与需求分析 在实际项目中,我们常常需要一个美观且功能完整的文件上传组件。然而,...

    自定义上传控件input file的样式

    同时,确保在处理用户文件时遵守隐私政策,不要在未经用户许可的情况下读取或上传文件。 在实际项目中,可能还会涉及到进度条显示、多文件上传、预览文件等功能,这些可以通过结合使用HTML5的FormData对象、Blob...

    Bootstrap样式文件上传jquery插件

    Bootstrap样式文件上传jQuery插件是前端开发者在构建交互式网页时常常使用的工具,尤其是对于需要用户上传文件的场景。这款插件,名为bootstrap-filestyle,是专门为Bootstrap框架设计的,目的是提升文件输入框的...

    PHP+jQuery+Ajax仿淘宝多上传按钮单文件上传

    这个功能在现代Web应用中非常常见,它提供了友好的用户体验,允许用户在不刷新页面的情况下上传文件,极大地提高了交互性。 首先,让我们了解一下这些技术的基础知识: 1. PHP(Hypertext Preprocessor)是一种...

    html5文件上传输入框样式代码.zip

    例如,你可以用伪元素和绝对定位来创建一个覆盖在原始输入框之上的自定义按钮样式: ```css .custom-file-input { display: none; /* 隐藏原始输入框 */ } .custom-file-button { position: relative; width: ...

    asp.net 按钮 样式 源码

    此外,如果需要动态更改按钮样式,可以使用ASP.NET的客户端脚本API或AJAX技术。 总的来说,ASP.NET按钮样式的源码设计涵盖了CSS、HTML以及服务器端编程的知识。理解并掌握这些概念,可以帮助开发者创建出既美观又...

    HTML中文件上传时使用的input type=”file”元素的样式自定义

    这可以通过设置`.fileinput-button`类的CSS样式完成,例如设置`position: relative`和`display: inline-block`,然后将`&lt;input type="file"&gt;`元素的`position`设为`absolute`,并将其`right`和`top`属性设置为0,使...

    上传控件input file 样式美化

    默认的`&lt;input type="file"&gt;`按钮样式各异,不符合现代网页设计的需求。我们可以将其设置为透明或者绝对定位,使其隐藏在其他元素后面,从而实现自定义按钮的效果。 ```css input[type="file"] { opacity: 0; ...

    input框添加图片按钮

    ### input框添加图片按钮 #### 知识点概述 在网页设计中,为了优化用户体验及提升界面美观度,经常会遇到需要在`input`框旁边或内部加入图标按钮的情况。例如,一个登录表单中的“显示密码”按钮或者搜索框旁边的...

    CSS按钮样式大全(精选)

    "CSS按钮样式大全(精选)"是一个资源集合,提供了多种不同风格的按钮样式,适用于各种网页设计需求。这个压缩包可能包含了多个CSS文件和示例HTML文件,用于演示如何通过CSS代码实现这些精美的按钮效果。 首先,我们...

    html修改FileUpload控件的浏览按钮的文字改为自定义

    - `&lt;input type="button" ...&gt;`:这是一个自定义的按钮,通过设置`value="beN"`来改变按钮上的文字。 - `onclick="f.click()"`:当点击这个按钮时,会触发隐藏的文件输入控件`f`的点击事件,从而弹出文件选择...

    漂亮的button样式

    本篇文章将深入探讨按钮样式的各种设计技巧、常见样式以及实现方法。 首先,我们关注按钮的基础样式。一个基本的HTML按钮元素 `&lt;button&gt;` 或 `&lt;input type="button"&gt;` 可以通过CSS来定制外观。例如,我们可以设置...

    各种CSS按钮样式

    首先,CSS按钮样式的基础是使用`&lt;button&gt;`元素或`&lt;input type="button"&gt;`来创建基本的HTML按钮。通过添加CSS类,我们可以定制按钮的颜色、大小、字体、边框、背景、阴影以及鼠标悬停和点击状态的效果。 1. **颜色和...

    更换单选按钮样式例子

    本示例"更换单选按钮样式例子"主要关注的是如何改变HTML中的单选按钮(Radio Button)的默认样式,使其在不同的浏览器环境下,如Firefox,展现出预期的设计。单选按钮是一种常见的表单元素,用于让用户在一组互斥的...

    css3 input按钮样式代码.zip

    "css3 input按钮样式代码.zip"这个压缩包文件显然是一个包含有关如何使用CSS3来定制HTML输入类型为"button"的样式的资源集合。以下是对这个主题的详细讲解: 1. **CSS3基础**: - CSS3是CSS的最新版本,引入了许多...

    Js/Jquery 实现自定义 上传 按钮

    在提供的文件名 "filamentgroup-jQuery-Custom-File-Input-87dfca9" 中,"filamentgroup" 是一个知名的前端开发团队,他们创建了一个名为 jQuery Custom File Input 的库,用于自定义文件上传按钮的样式和交互。...

    Uniapp 各类 button按钮

    在移动应用开发中,按钮(Button)是用户界面不可或缺的元素,它承载着用户的操作行为,如点击提交、打开新页面、执行特定功能等。在 UniApp 开发框架中,Button 组件扮演着同样的角色,提供了丰富的样式和交互功能...

Global site tag (gtag.js) - Google Analytics