<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义input type="file" 的样式</title>
<style type="text/css">
body{ font-size:14px;}
input{ vertical-align:middle; margin:0; padding:0}
.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>
</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="document.getElementById('textfield').value=this.value" />
<input type="submit" name="submit" class="btn" value="上传" />
</form>
</div>
</body>
</html>
详细出处参考：http://www.jb51.net/web/39559.html
分享到：
相关推荐
`input type="file"` 是HTML中用于创建文件选择器的元素，它的默认样式往往不符合设计师的期望，因此需要对其进行美化。原始的`file`控件通常呈现为一个简单的文本框和一个"浏览"按钮，其外观朴素且难以与页面其他...
这可以通过设置`.fileinput-button`类的CSS样式完成，例如设置`position: relative`和`display: inline-block`，然后将`<input type="file">`元素的`position`设为`absolute`，并将其`right`和`top`属性设置为0，使...
HTML中的`<input type="file">`标签是实现这一功能的基础，但它的样式和交互性往往有限。本篇将详细介绍如何在非`<input>`标签（如`<span>`）上模拟`<input type="file">`的功能，并探讨uploadify插件的使用，以提升...
如果要让浏览按钮更漂亮一点，我们想定义它的背景颜色，甚至想用...偶然看到一篇文章：input file 文件选择框美化 作者是把系统默认的按钮设置透明度为0，再定义一个label标签样式，来覆盖透明掉的按钮。支持IE6\IE7\FF
4. **CSS样式**: 描述中的"css"是指Bootstrap File Input的样式文件。这些CSS文件定义了插件的各种视觉元素，如按钮样式、文件列表展示、错误提示等。你可以根据自己的需求自定义这些样式，以适应不同的品牌风格或...
然后在CSS中定义`.custom-file-input`类： ```css .custom-file-input { display: inline-block; width: auto; /* 自适应宽度 */ margin: 10px; /* 添加边距 */ padding: 5px 10px; /* 添加内边距 */ font-...
一个典型的ASP.NET Web应用程序通常由HTML、CSS和JavaScript组成，用于定义页面布局、样式和前端交互逻辑。HTML中的`<input>`元素用于接收用户输入，如文本、数字或选择项。例如，一个简单的文本输入字段可以这样...
文件上传是我们经常会用到的功能，但是原生的input样式太丑了，能不能自定义一个input文件上传样式呢？ 我这里写了两种方法，form表单提交跟ajax异步提交都没有问题，自动上传或者点击上传按钮上传也都没问题 先看...
在HTML5中，`<input type="file">`标签可以用于选择本地文件，但其默认样式通常较为简陋。为了提供更好的用户体验，我们可以使用JavaScript或jQuery来增强这一功能。例如，添加预览图片的功能对于图像文件来说非常...
<input id="File1" type="file" accept=".xls,.doc,.txt,.pdf" /> ``` `accept`属性值是一个逗号分隔的MIME类型列表或文件扩展名列表。在上面的例子中，`.xls`对应Excel文件，`.doc`对应Word文档，`.txt`对应纯文本...
文章中提出了一种思路，通过在input控件外围嵌套一个div元素，使用CSS样式对file控件进行美化。具体方法是设置div元素为相对定位，然后把真正的file控件设置为绝对定位，并将它放置在div内部的合适位置。为了使file...
CSS部分定义了这些元素的样式，如浮动、边距、宽高、边框等，以达到美观的布局效果。`.imgnum`类下的`<input type="file">`被设置为不透明度为0，使得用户看不到实际的文件选择按钮，而只能看到覆盖在其上的自定义...
下面我们了解一下，多图上传时，怎么实现预览、上传...input id=upload type=file accept=image/* multiple=multiple> <button class=btn>点击上传</button> <!-- 存放预览图片 --> </div>
通常，HTML中的`<input type="file">`元素用于创建一个文件选择器，但其默认样式非常朴素，不符合现代网页设计的需求。我们可以通过CSS来改变这个元素的外观，同时保持它的功能不变。 1. 隐藏原始文件上传按钮： ...
一个简单的文件上传表单通常包含`<form>`标签，用于定义一个表单区域，以及`<input>`标签，其`type`属性设置为`file`，让用户选择本地文件。例如： ```html <input type="file" name="fileToUpload" id="fileTo...
本篇文章将详细介绍如何改变和美化`input file`的样式，以提供更好的用户体验。 首先，我们需要了解`<input type="file">`的基本结构和工作原理。这个标签会生成一个文本框和一个按钮，用户可以通过点击按钮打开...
这里我们可以通过设置`<input type="file">`的样式使其隐藏，然后通过自定义样式来模拟一个文件选择按钮。 ```css .file-input-container { position: relative; } .file-input-container input[type=file] { ...