`

input[type=file]文件样式太丑,自定义样式

    博客分类:
  • js
js 
阅读更多
原始的file控件在搜狗浏览器上很丑。自定义样式使其美观。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义input type="file" 的样式</title>
<style type="text/css">
.file-box{ position:relative;width:340px}
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
<script>
	function tt(){
		var fileField=document.getElementById('fileField').value;
		var files=fileField.split("\\");
		document.getElementById('textfield').value=files[files.length-1];
	}
</script>
</head>
<body>
<div class="file-box">
  <form action="" method="post" enctype="multipart/form-data">
	 <input type='text' name='textfield' id='textfield' class='txt' />  
	 <input type='button' class='btn' value='浏览...' />
	 <input type="file" name="fileField" class="file" id="fileField" size="28" onchange="tt()" />
  </form>
</div>
</body>
</html>

分享到:
评论

相关推荐

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

    总之,自动上传文件并自定义样式是提高网页交互性的重要一环。通过使用`&lt;input type="file"&gt;`、事件监听和`$.ajaxFileUpload`,我们可以构建出既美观又功能强大的文件上传组件,提升用户的使用体验。同时,对于...

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

    为了满足用户界面的需求和提升用户体验,我们需要对这个元素进行自定义样式设计。 在创建一个Bootstrap风格的上传按钮时,我们可以首先构建基础结构。这里,我们用两个嵌套的`&lt;span&gt;`标签,外层的`&lt;span&gt;`作为容器...

    定义input type=file 样式的方法

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

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

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

    00type=file导入文件按钮样式修改的jsp代码-完美好

    这样,当用户点击自定义的“选择文件”按钮时,实际的`&lt;input type="file"&gt;`会被触发,文件名会显示在假按钮上。通过这种方式,我们可以实现一个更友好、更具设计感的文件上传体验。 总结来说,"00type=file导入...

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

    总的来说,通过CSS样式自定义,我们可以将原本生硬的`&lt;input type="file"&gt;`元素转变为符合网页设计风格的文件上传组件。这涉及到布局、定位、透明度以及浏览器兼容性等多个方面的技巧。在实际应用中,可能还需要根据...

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

    它通过JavaScript、HTML和Ajax技术,提供了一种用户友好的文件上传体验,可以替代传统的`&lt;input type="file" /&gt;`标签,使得文件上传过程更加流畅且交互性更强。这种技术在Web开发中广泛应用,尤其在社交媒体、图像...

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

    首先,`&lt;input type="file"&gt;` 的基本功能是允许用户浏览和选择计算机上的文件,随着技术的发展,现在还可以通过增加 `multiple` 属性来支持多文件上传,并且支持多种文件格式。但在样式调整方面,由于浏览器的安全性...

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

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

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

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

    自定义上传控件input file的样式

    在网页设计中,我们经常需要使用到`&lt;input type="file"&gt;`标签来实现文件上传功能,但默认的上传控件样式通常较为简单,不符合现代网页的美观需求。本篇将探讨如何自定义`input file`的样式,打造个性化的上传界面。 ...

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

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

    jquery上传文件点击input上传文件样式代码

    本主题聚焦于利用jQuery来改进文件上传功能,尤其是针对`&lt;input type="file"&gt;`元素的样式和交互。在传统的HTML文件上传输入框中,用户通常会看到一个简单的文本按钮,点击后弹出文件选择对话框。然而,这样的设计...

    input样式-input

    因此,对 `input type=file` 进行自定义样式处理是非常有必要的。 #### 一、基本语法介绍 在HTML中,`&lt;input&gt;` 元素通过 `type` 属性来指定不同的输入类型,其中 `type="file"` 表示文件输入类型。基本用法如下: ...

    上传控件input file 样式美化

    在网页设计中,上传控件`&lt;input type="file"&gt;`是必不可少的元素,它允许用户选择本地文件并上传到服务器。然而,由于浏览器的安全限制,这个控件的默认样式通常非常简陋,无法直接通过CSS进行大幅度的美化。本教程将...

    上传图片问题(html标签实现input/file功能),及uploadify插件

    通常,我们会将`&lt;input type="file"&gt;`隐藏,然后通过CSS和JavaScript将其与自定义元素(如`&lt;span&gt;`)绑定。例如: ```html &lt;span id="customFile"&gt;选择图片 &lt;input type="file" id="fileInput" style="display: ...

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

    为了实现这个目标,我们可以使用一个包含`&lt;input type="file"&gt;`的链接或者按钮,然后使用CSS来隐藏原始的文件输入框,同时为链接或按钮添加自定义样式。关键在于,我们需要保持文件上传功能的可用性,即使在...

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

    这个CSS样式使得`&lt;input type="file"&gt;`看起来像一个自定义的按钮,而实际的文件选择控件被隐藏,只保留文字提示。通过这种方式,我们可以改变`&lt;input type="file"&gt;`元素的外观,使其更好地融入网页的设计风格。 ...

Global site tag (gtag.js) - Google Analytics