`
fftiger
  • 浏览: 11674 次
  • 性别: Icon_minigender_1
社区版块
存档分类

一个改变input:file样式的小技巧

 
阅读更多
相信大家对<input type="file"/>标签的样式都不感冒吧,尤其是文字很难自己设置,下面就是一个改变样式的小技巧,目前没发现不兼容的浏览器的:

<input id="upfile" type="file" name="file" style="display:none" />
<button onclick="document.getElementById('upfile').click()">上传文件</button>

你可以随便改变button的样式,达到自己想要的。
分享到:
评论

相关推荐

    INPUT EXCEL FILE DATA

    6. **工作簿和工作表管理**:一个Excel文件称为工作簿,可包含多个工作表。通过添加、删除和重命名工作表,用户可以组织和管理不同的数据集。 7. **保护和共享**:为了防止未经授权的改动,Excel允许设置工作簿和...

    Bootstrap File Input 控件离线文档

    Bootstrap File Input则是Bootstrap生态系统中的一个组件,它扩展了原生的HTML文件输入元素,使其更加灵活和用户友好。 此控件的主要特性包括: 1. **多文件选择**:用户可以选择多个文件进行上传,极大地提高了...

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

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

    Ajax Upload文件上传插件 替代(<input type=”file” />)上传图片

    upload.php.htm`可能是包含HTML和PHP代码的综合文件,`ajax-upload-php.zip`是插件的完整源码包,而`ajax-file-upload.php_files`可能是一个目录,包含了与`ajax-file-upload.php`相关的其他资源文件,如CSS样式表、...

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

    首先,要创建一个自定义的文件上传按钮,可以使用`&lt;span&gt;`元素包裹`&lt;input type="file"&gt;`,并添加一个用于显示文本的额外`&lt;span&gt;`,如“上传”。这样,HTML结构如下: ```html 上传 &lt;input type="file"&gt; ``` ...

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

    其中,`&lt;input type="file"&gt;` 是一个典型的例子,它用于创建文件上传功能,但在不同浏览器中,其默认样式差异较大,且不易通过CSS直接控制。本文将详细介绍如何对type=file的input进行美化以及自定义上传按钮的样式...

    js使用小技巧

    通过正则替换,可以获取URL路径的最后一个目录: ```javascript var str = "http://localhost/Home/manage/FCKeditor/dialog/fck_image.html"; str = str.replace(/[^\/]+$/,""); ``` 18. **字符串trim方法**...

    custom-html-file-input

    这个"custom-html-file-input"项目提供了一个单文件示例,展示了如何通过结合CSS(层叠样式表)和JavaScript来定制文件上传控件的外观和功能。 在默认情况下,HTML的`&lt;input type="file"&gt;`标签用于创建一个简单的...

    Html网页代码常用小技巧总结续,网页制作学习.docx

    4. **电子邮件表单提交**:创建一个简单的电子邮件提交表单,如 `&lt;form name="form1" method="post" action="mailto:****@***.com" enctype="text/plain"&gt;&lt;input type=submit&gt;&lt;/form&gt;`,用户点击提交按钮后会用默认...

    表单事件jQuery文件域美化File Style Demo演示

    "表单事件jQuery文件域美化File Style Demo演示"提供了一个解决方案,通过jQuery库对文件域进行美化,提升用户体验。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互等任务。在...

    微信小程序源码-装修装饰.rar

    微信小程序是一种轻量级的应用开发平台,主要针对移动端,尤其是智能手机用户。...开发者可以通过研究这个源码,深入理解微信小程序的开发流程和技巧,同时也能学习到如何构建一个面向特定行业的实用小程序。

    autocad绘图技巧

    在AutoCAD绘图过程中,掌握一些实用的技巧能极大地提高工作效率。以下是一些关键知识点的详细说明: 1. **替换找不到的原文字体**:如果系统找不到特定字体,可以将其他字体文件复制并重命名以替换它。例如,当提示...

    HTML5+CSS3开发商业站点Chapter10.pptx

    - **过渡**:定义一个元素从一种样式逐渐变化到另一种样式的时间。 - **动画**:使用`@keyframes`规则定义一系列关键帧,然后将其绑定到一个元素上。 #### 综合练习案例分析 以**开心网游戏页面**为例,具体步骤...

    js控制上传图片的大小

    1. **获取文件对象**:当用户选择一个文件后,可以通过`&lt;input type="file"&gt;`元素的`files`属性获取到文件对象。 2. **读取文件内容**:利用`FileReader`接口的`readAsDataURL`方法可以将文件读取为Data URL格式,...

    HTML-XML与网页制作测试题及答案.docx

    2. **页内框架**:要想在一个网页中嵌套另外一个网页,可以使用页内框架(`iframe`)。 3. **表单与目标窗口**:只有在框架结构的网页中,才能将`&lt;a&gt;`标记符的`target`属性设置为目标文件在一个新的浏览器窗口中打开。...

    7种时尚的文件上传表单域美化特效

    然而,传统的HTML `&lt;input type="file"&gt;` 标签的样式通常较为简陋,不符合现代网页设计的审美需求。本文将探讨7种时尚的文件上传表单域美化特效,提升用户体验,使文件上传变得更具吸引力。 1. **隐藏默认样式**: ...

    Tcl reference

    例如,如果一个窗口被最小化或最大化,该命令将等待直到窗口状态改变。 - **tkwaitwindowwindow**: 该命令用于暂停程序直到指定窗口被销毁。这是在处理用户交互时非常有用的一个功能,比如当需要等待一个对话框关闭...

    javascript 使用技巧

    使用`&lt;script&gt;`标签的`archive`属性可以将多个JS文件打包为一个压缩文件,但该属性同样不被现代浏览器支持: ```html &lt;script archive="utils.jar" src="animation.js"&gt;&lt;/script&gt; ``` #### 8. 获取当前选中文本 ...

Global site tag (gtag.js) - Google Analytics