`

美化type="file"

阅读更多
<div class="fileInput left">
  <input type="file" name="upfile" id="upfile" class="upfile" onchange="document.getElementById('upfileResult').innerHTML=this.value"/>
    <input class="upFileBtn" type="button" value="上传图片" onclick="document.getElementById('upfile').click()" />
</div>
<span class="tip left" id="upfileResult">图片大小不超过2M,大小90*90,支持jpg、png、bmp等格式。</span>



.fileInput{width:102px;height:34px; background:url(http://images.cnblogs.com/cnblogs_com/dreamback/upFileBtn.png);overflow:hidden;position:relative;}
.upfile{position:absolute;top:-100px;}
.upFileBtn{width:102px;height:34px;opacity:0;filter:alpha(opacity=0);cursor:pointer;}









来源:http://www.cnblogs.com/dreamback/archive/2011/10/12/2208557.html
  • 大小: 2.1 KB
分享到:
评论

相关推荐

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

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

    定义input type=file 样式的方法

    要美化`file`控件,一种常见方法是使用CSS隐藏原生的`input type="file"`,并使用其他HTML元素(如`&lt;input type="text"&gt;`和`&lt;input type="button"&gt;`)来模拟其外观。这种方法的核心在于将`file`控件的位置调整到模拟...

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

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

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

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

    上传控件input file 样式美化

    通过以上方法,我们可以对`&lt;input type="file"&gt;`上传控件进行样式美化,创建出符合网页设计风格的上传界面。但请注意,虽然我们可以改变控件的外观,但其核心功能和交互仍受浏览器安全策略的限制。在设计时,要兼顾...

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

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

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

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

    关于input的file 控件及美化

    &lt;input type="file" name="fileField" class="file" id="fileField" size="28" /&gt; ``` 在这个例子中,`.file-box` 容器允许我们为整个组件设置定位和大小。`.txt` 类代表模拟的文本框,`.btn` 类代表模拟的...

    input上传文件美化

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

    上传按钮file美化

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

    美化file或修改file类型按钮上的“浏览”

    由于浏览器的安全限制,我们不能直接修改input[type="file"]的文本内容,但可以通过覆盖默认样式,使用自定义的背景图片和透明的文字来实现视觉上的替换。 1. **隐藏默认按钮**: ```css input[type="file"] { ...

    美化File控件-图片按键上传文件

    【标题】"美化File控件-图片按键上传文件"涉及的知识点主要集中在前端网页的文件上传功能上,尤其是如何在用户界面中实现美观且实用的文件上传组件。在这个主题下,我们将探讨HTML5的File API、CSS样式美化、...

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

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

    美化file input

    &lt;input type="file" id="customFileInput"&gt; ``` 这个元素允许用户选择本地文件进行上传。然而,由于其默认样式通常是操作系统原生的,我们需要通过CSS来覆盖这些样式,使其符合网站的设计规范。 在CSS方面,由于...

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

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

Global site tag (gtag.js) - Google Analytics