input[type=file]文件样式太丑，自定义样式 - - ITeye博客

`

13813962825

浏览: 130794 次
性别:
来自: 南京

最近访客更多访客>>

u012494069

elike

wanxiaotao12

sslai

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

菜鸟900101：真心谢谢，解决了我头疼好几天的问题，谢谢谢谢
使用Ftpclient从FTP上进行下载时文件少一个字节，打不开
一生荣耀白： [u][/u]
Freemarker分页的宏
liyang678：这样不就得要求被请求一方必须按您的这种XML格式解析吗。
使用HttpClient、注解、动态代理、Spring的Bean后处理器实现Http消息发送
liyang678：可以演示一下如何调用吗。不是很明白呢。
使用HttpClient、注解、动态代理、Spring的Bean后处理器实现Http消息发送
hzxlb910： ...
使用TransactionTemplate来完成Spring的编程式事务管理

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>

分享到：

进度条 | ecplise每次编译时都会进行js校验，如何ec ...

2014-03-25 17:06
浏览 2182
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

HTML中文件上传时使用的input type=”file”元素的样式自定义: 为了满足用户界面的需求和提升用户体验，我们需要对这个元素进行自定义样式设计。在创建一个Bootstrap风格的上传按钮时，我们可以首先构建基础结构。这里，我们用两个嵌套的`<span>`标签，外层的`<span>`作为容器...

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

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

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

html修改FileUpload控件的浏览按钮的文字改为自定义: 默认情况下，当我们在HTML中使用`<input type="file">`来创建一个文件选择器时，浏览器通常会显示一个默认样式的“浏览”按钮，用于打开文件选择对话框。然而，对于追求美观和统一界面风格的开发者来说，这样的默认...

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

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

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

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

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

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

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

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

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

上传图片问题（html标签实现input/file功能），及uploadify插件: 通常，我们会将`<input type="file">`隐藏，然后通过CSS和JavaScript将其与自定义元素（如`<span>`）绑定。例如： ```html <span id="customFile">选择图片 <input type="file" id="fileInput" style="display: ...

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

教你如何改变上传文件input的file属性.doc: 这个CSS样式使得`<input type="file">`看起来像一个自定义的按钮，而实际的文件选择控件被隐藏，只保留文字提示。通过这种方式，我们可以改变`<input type="file">`元素的外观，使其更好地融入网页的设计风格。 ...

Global site tag (gtag.js) - Google Analytics