`
落地窗
  • 浏览: 437122 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html input type=file 美化样式方案

阅读更多
[size=large][b]问题:
通过其他的button,调用input type=file 中的click事件,进行提交,无法提交!
在表单上传中,只有用户鼠标点击了file中的浏览按钮,表单才能提交,所以无论用其他任何方式,进行调用file中的按钮,都会失败!

解决方案:
将file元素,透明化,放在上层,然后再该元素下层,放input text 和input button 在file下层,z-index设置为负数,进行css美化,这样用户点击时,肯定是点击的file,但是用户感觉是在点击button,最后,在file的change事件中,将file中的value赋值到下方的input text中即可。
<div id="re_file">
<span class="re_title">上传文件:</span>
<input id="aa" style="width:430px;height:17px;position:absolute;" type="text" ><input class="btn_more" style="position:absolute;margin-left: 440px;z-index: -100" type="button" value="浏览">
<input onchange="tt()" style="filter:alpha(opacity=0);width:500px;height:25px;" type="file" id="fileName" name="fileName"  onclick="resetButton()"/>	
</div>
[/b][/size]
分享到:
评论

相关推荐

    定义input type=file 样式的方法

    `input type="file"` 是HTML中用于创建文件选择器的元素,它的默认样式往往不符合设计师的期望,因此需要对其进行美化。原始的`file`控件通常呈现为一个简单的文本框和一个"浏览"按钮,其外观朴素且难以与页面其他...

    css input[type=file] 样式美化(input上传文件样式 )

    本教程将详细介绍如何使用CSS对`input[type=file]`进行样式美化,使文件上传按钮更加符合网站的整体风格。 首先,我们来看一个简单的例子。在这个例子中,我们创建了两个不同的样式来展示如何自定义文件上传按钮: ...

    input file选择文件之后自动上传(样式自定义美化)

    "input file选择文件之后自动上传(样式自定义美化)"这个主题聚焦于一个常见但有时被忽视的用户体验改进点:如何在用户选择文件后立即启动上传,并且在上传过程中保持界面的美观与友好。下面将详细介绍这一过程涉及...

    上传控件input file 样式美化

    创建一个具有美化样式的`&lt;button&gt;`或`&lt;a&gt;`标签,通过JavaScript触发`&lt;input type="file"&gt;`的点击事件。 ```html &lt;button class="custom-upload-btn"&gt;选择文件 &lt;input type="file" id="upload-input" style=...

    文件上传input file简便美化方案(css)

    首先,我们要理解在不同浏览器中文件上传input(&lt;input type="file"&gt;)的表现形式存在差异,这主要是由于各个浏览器对HTML和CSS的解释以及渲染方式不同所致。为了达到在多浏览器中表现一致的效果,需要借助于CSS样式...

    CSS美化 input type=file 兼容各个浏览器

    在网页设计中,CSS美化`&lt;input type="file"&gt;`元素常常是一项挑战,因为不同的浏览器对这个元素的默认样式和行为处理方式各异。为了解决这个问题,开发者们需要找到一种跨浏览器的解决方案来统一表现。这里介绍一种纯...

    关于input的file 控件及美化

    综上所述,`&lt;input type="file"&gt;`控件在网页上传功能中起着关键作用,虽然其默认样式有限,但通过CSS和HTML的巧妙组合,我们可以创建出符合设计需求的自定义文件上传组件。记住,良好的用户体验是任何网页设计的核心...

    input上传文件美化

    input标签type="file",上传文件样式美化。 上传完毕显示文件名。

    教你如何改变上传文件input的file属性.doc

    然后,我们通过CSS来美化`&lt;input type="file"&gt;`元素。这里创建了一个`.file`类,应用了一些基本的样式,比如宽度、高度、边框、背景色等,使其看起来更加友好。同时,为了让“选择文件”按钮更加易用,我们使用了...

    type=file的inpu美化,自定义上传按钮样式代码

    本文将详细介绍如何对type=file的input进行美化以及自定义上传按钮的样式。 首先,我们需要理解,`&lt;input type="file"&gt;` 的默认行为是创建一个文本输入框和一个“浏览”按钮,用户可以通过这个按钮选择本地文件进行...

    上传按钮file美化

    在本主题中,我们将深入探讨如何实现“上传按钮file美化”,以创建一个类似微博的图片上传界面,同时确保跨浏览器的兼容性。我们将讨论如何自定义图片、样式以及按钮上的文字,以提升用户体验。 首先,我们需要了解...

    jquery封装的input file控件

    在网页开发中,HTML的`&lt;input type="file"&gt;`控件用于实现文件上传功能,但它的默认样式通常较为简陋,无法满足现代网页设计的需求。"jquery封装的input file控件"是一种解决方法,通过jQuery库来改进文件上传控件的...

    jquery 美化下拉框,单选按钮,上传文件input typeFile的插件

    在这个特定的场景中,我们关注的是如何使用`jQuery`来美化通常较为单调的HTML元素,如下拉框、单选按钮和上传文件的`input[type="file"]`元素。`pixelmatrix-uniform-2446d99`这个压缩包文件很可能包含了`jQuery`的...

    美化file input

    在网页设计中,"美化file input"是一个常见的需求,它涉及到HTML、CSS和JavaScript技术的综合运用,以提升用户在上传文件时的交互体验。在默认情况下,浏览器提供的file input控件样式通常比较简单且不统一,不利于...

    用css alpha 滤镜 实现input file 样式美化代码

    本篇文章将详细介绍如何利用CSS的Alpha滤镜来实现`&lt;input type="file"&gt;`样式的美化。 首先,我们需要了解`&lt;input type="file"&gt;`在不同浏览器中的表现。在IE浏览器中,由于安全原因,用户必须直接点击文件上传按钮...

Global site tag (gtag.js) - Google Analytics