`

改变HTML浏览文件的按钮样式

    博客分类:
  • HTML
 
阅读更多

 

思路如下:

 

看看代码就明白。 其实就是把系统自带的按钮给隐藏起来,然后 自己定义一个 text文本框,和一个自定义浏览按钮.

 

当点击自定义的按钮时,调用的是 隐藏系统的浏览按钮, 然后系统的浏览图片的文本框. 有一个onchage事件, 当发生改变时,

 

就把值填写到自定义文本框中..

 

 然后,点击submit按钮提交..就能获取值;

具体代码如下:

 

<form   name=frm> 
<input   type=file   name=f   style= "display:none "   onchange= "frm.i.value=value "> 
<input   name=i   style= "border:1   solid   red "> &nbsp; <input   type=button   value=浏览   onclick= "frm.f.click() "   style= "border:1   solid   #ee66cc "> 
</form>

 

分享到:
评论
1 楼 xialluyouyue 2014-09-18  
ie是禁止上传的元素通过点击一个元素来触发点击上传元素,你的方法是错误的

相关推荐

    css自定义文件上传按钮样式

    这样,我们就可以在它的上方添加自定义的按钮样式。 2. 创建自定义按钮: 使用`&lt;label&gt;`元素与`&lt;input&gt;`元素关联,通过`for`属性指定与`&lt;input&gt;`的`id`匹配,点击`&lt;label&gt;`时会触发`&lt;input&gt;`的点击事件。这样,...

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

    默认情况下,当我们在HTML中使用`&lt;input type="file"&gt;`来创建一个文件选择器时,浏览器通常会显示一个默认样式的“浏览”按钮,用于打开文件选择对话框。然而,对于追求美观和统一界面风格的开发者来说,这样的默认...

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

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

    20种炫酷CSS3按钮样式和鼠标滑过特效

    可以假设这个压缩包内包含了20个独立的CSS3按钮样式示例,每个可能是一个HTML和CSS文件组合,用于演示特定的按钮设计和鼠标滑过效果。这些文件可以帮助开发者理解和学习如何使用CSS3实现这些炫酷的效果,或者直接...

    好看的文本框和按钮样式

    以下是从给定文件中提取的关键知识点,深入解析了如何通过HTML、CSS和JavaScript来创造既美观又实用的文本框和按钮样式。 ### 知识点一:自定义文本框边框 #### 样式代码: ```html ; border-bottom:1px solid ...

    html表单上传文件的“浏览”按钮修改方法

    "HTML表单上传文件‘浏览’按钮修改方法" HTML表单上传文件的“浏览”按钮是...通过使用CSS和JavaScript可以修改HTML表单上传文件的“浏览”按钮的样式。这种方法可以在实际开发中应用于实现文件上传控件的样式修改。

    上传按钮样式处理

    总的来说,"上传按钮样式处理"是一个融合了HTML、CSS和JavaScript技术的话题,目的是提供一个美观、友好的文件上传体验。通过自定义样式和添加交互,我们可以使上传按钮与网站的整体设计更加协调,提升用户体验。

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

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

    HTML+css卷帘样式效果

    HTML和CSS是网页设计的基础,其中CSS(层叠样式表)尤其重要,它负责定义页面的布局和样式...通过结合HTML和CSS,以及可能的JavaScript,我们可以构建出一个具有卷帘样式的动态网页,提升用户在浏览网页时的视觉感受。

    javascript 表单中浏览文件的“浏览”按钮修改

    ### JavaScript 表单中浏览文件的“浏览”按钮修改 #### 知识点概述 本文主要探讨了如何在HTML表单中实现一个自定义的文件浏览功能。通过使用JavaScript,我们可以创建一个更加用户友好的界面来选择文件,而不是...

    Html风格的文件浏览器.rar_html格式浏览器_vc 浏览器开发_文件浏览_文件浏览器_浏览器

    HTML风格的文件浏览器是一种利用VC++编程语言开发的软件,它结合了HTML的美观界面与传统的文件浏览功能。这种浏览器的主要特点是将用户交互界面设计得类似网页,提供了一个直观且友好的用户体验。开发者通过VC++的...

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

    接下来,我们需要修改样式使得"上传"和文件选择框在同一行显示。这可以通过设置`.fileinput-button`类的CSS样式完成,例如设置`position: relative`和`display: inline-block`,然后将`&lt;input type="file"&gt;`元素的`...

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

    由于浏览器安全性和兼容性的限制,直接对input[type=file]应用CSS样式通常只能改变输入框的部分外观,无法影响到“浏览”按钮。 为了解决这个问题,我们可以采取一种常见的技巧:利用HTML和CSS的组合来模拟自定义...

    新浪网样式图片浏览示例-保真

    【新浪网样式图片浏览示例-保真】项目是一个旨在实现与新浪网相似的图片浏览体验的示例。这个项目的核心目标是复制新浪网图片滑动展示的效果,其中包括图片的自动轮换、文字的同步联动等功能,以提供给用户一个高度...

    让网页中上传的浏览按钮更漂亮

    你是否老觉得html里的文件域的浏览按钮太难看呢?这个是我做的浏览组件,可以自定义图片按钮,随心所欲的改变的默认按钮样式。 你可以在这个控件上做更大的开发,可用于商业用途。

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

    首先,我们可以利用CSS(层叠样式表)来改变file类型按钮的外观。由于浏览器的安全限制,我们不能直接修改input[type="file"]的文本内容,但可以通过覆盖默认样式,使用自定义的背景图片和透明的文字来实现视觉上的...

    图片加播放按钮(含切换图片播放按钮)

    根据压缩包子文件的文件名称“图片上加播放按钮.html”,我们可以推断这个文件是一个HTML页面,它可能包含了实现这一功能的HTML结构、CSS样式以及JavaScript代码。打开这个文件,开发者可以查看和学习如何将播放按钮...

    input标签样式

    2. **自定义按钮样式**:创建一个`&lt;label&gt;`元素,将`for`属性设置为`&lt;input type="file"&gt;`的`id`,并给`&lt;label&gt;`应用所需的样式。 ```html 自定义上传按钮 ``` 3. **改变按钮颜色和边框**:使用`color`,`...

Global site tag (gtag.js) - Google Analytics