`
txf2004
  • 浏览: 7037722 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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

阅读更多
<style type="text/css">
<!--
#input1{border:1px solid #0000FF}
#btn1{width:70px;height:21px;font-size:12px;padding-top:3px;border-left:1px solid #FFFFFF;border-top:1px solid #FFFFFF;border-right:1px solid #666666;border-bottom:1px solid #666666}
//-->
</style>
<input type="text" id="input1"> <input type="button" id="btn1" onclick="myfile.click();" value="浏览文档">
<input type="file" id="myfile" onchange="input1.value=this.value" style="display:none">
分享到:
评论
2 楼 moyan03 2012-07-07  
IE8不行。
1 楼 mzba520 2011-02-25  
这个方法用chrome浏览器点击按钮没效果啊,怎么办?

相关推荐

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

    在HTML结构中,我们通常会隐藏原生的file input,然后在上面覆盖一个自定义样式的按钮和一个用于显示文件路径的文本框,以便用户点击这个“按钮”来打开文件选择对话框。这里的“假”上传按钮(.file-uploader-wrap-...

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

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

    上传按钮file美化

    总之,美化上传按钮file涉及到HTML、CSS、JavaScript的综合运用,通过自定义样式、利用jQuery处理兼容性问题以及添加额外的交互功能,我们可以创建一个既美观又实用的上传组件,其体验可以媲美微博等社交平台。

    关于type="file"的input框样式修改小结

    它允许直接修改上传按钮的样式,但这种方法的局限性在于只适用于支持 `-webkit-` 前缀的浏览器,不具备良好的跨浏览器兼容性。尽管在现代移动设备上可能效果良好,但在非 WebKit 内核的浏览器中则无法生效。 为了...

    修改file按钮的默认样式实现代码

    本教程将详细介绍如何通过CSS和JavaScript(使用jQuery库)来修改file按钮的默认样式,创建一个更加吸引人的用户界面。 首先,我们来看HTML结构。这里创建了一个`&lt;form&gt;`元素,其中包含一个id为`addFile`的`&lt;input ...

    文件上传按钮样式

    在本例中,我们关注的是“文件上传按钮样式”,特别是利用Bootstrap框架来实现这一功能,并且具备图片上传预览的效果。Bootstrap是一款流行的前端开发框架,它提供了丰富的UI组件,帮助开发者快速构建响应式、移动...

    css美化input file按钮的代码方法

    `input[type=file]`默认的样式通常由浏览器控制,很难通过CSS直接修改其外观,例如改变背景颜色或应用背景图片。 要解决这一问题,一种常见的技巧是利用`label`元素与`input[type=file]`关联,通过CSS隐藏原始的...

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

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

    react-reactfilereaderinputReact文件输入组件能够控制样式和抽象自文件读取

    `react-file-reader-input`是一个非常实用的库,它为React应用程序提供了一个高度可定制的文件输入组件,允许开发者更轻松地控制文件读取过程以及组件的样式。这个组件的核心功能是抽象出文件读取的复杂性,使开发者...

    文件上传插件bootstrap File

    这些CSS文件定义了插件的各种视觉元素,如按钮样式、文件列表展示、错误提示等。你可以根据自己的需求自定义这些样式,以适应不同的品牌风格或界面设计。 5. **JavaScript插件结构**: 描述中的"js"指的是插件的核心...

    Bootstrap File Input 控件离线文档

    4. **自定义上传按钮和清除按钮**:可以自定义按钮的文本、图标和样式,与网站设计无缝融合。 5. **文件大小限制**:可以设置上传文件的最大大小,防止过大文件导致的问题。 6. **多语言支持**:内置多种语言,满足...

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

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

    input file上传文件样式支持html5的浏览器解决方案

    这是因为Firefox浏览器出于安全考虑,限制了对File上传控件的一些样式属性的修改。为了解决这个问题,一种可行的策略是采用HTML5的新特性来构建一个自定义的File上传组件。我们可以创建一个包含输入框、按钮和实际的...

    美化file input

    在CSS方面,由于file input的样式很难直接控制,我们通常会采用“隐藏原生input,创建自定义按钮”的方法。例如: ```css #customFileInput { display: none; } #customFileInput + label { background-color: #...

    HTML中文件上传时使用的&lt;input type="file"&gt;元素的样式自定义

    这样,文件上传按钮就会呈现出Bootstrap的默认按钮样式。如果需要调整按钮的大小,可以为`.fileinput-button`添加`width`属性,但要注意保持`&lt;input&gt;`的绝对定位正确,确保它覆盖在“上传”文本上。 总的来说,通过...

    关于input的file 控件及美化

    由于file输入控件的样式限制,我们不能直接修改其外观。为了实现自定义样式,可以采用以下策略: 1. 使用一个外部`&lt;div&gt;`作为容器,以便于定位和布局。 2. 在`&lt;div&gt;`内创建一个模拟的文本框和按钮,它们用于显示...

    Bootstrap样式文件上传jquery插件

    而bootstrap-filestyle插件就是为了弥补这一不足,通过简单的配置,可以将原始的、样式简单的文件上传按钮转变为具有Bootstrap样式的、功能丰富的组件。 该插件的核心特性包括: 1. **多文件上传支持**:用户可以...

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

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

Global site tag (gtag.js) - Google Analytics