定义input type=file 样式的方法
当我们想要用css美化表单的时候，有两个控件就会和前段人员作对，一个是是大名鼎鼎的select，另一个就是我现在要说说的input type=file
为什么要美化file控件？试想一下，别的孩子都穿戴整齐漂亮，其中两个孩子怎么都不鸟你，太不和谐了。
原始的file控件是这样的（并且不同浏览器显示的还不一样...）：
别以为这个是由一个text和一个button组合成的，它是一个控件，html代码为：
<input type="file" name="file" />
既然这样我们就用一个text和一个button来显示这个file的样式，html代码是这样：
<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>
外面的一层div是为了给里面的input提供位置参考，因为写样式的时候需要相对定位，使真正的file控件覆盖在模拟的上面，然后隐藏掉file控件（即使file控件不可见），所以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 }
完整代码如下：
<!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 希望对大家有用
相关推荐
这可以通过设置`.fileinput-button`类的CSS样式完成，例如设置`position: relative`和`display: inline-block`，然后将`<input type="file">`元素的`position`设为`absolute`，并将其`right`和`top`属性设置为0，使...
下面我们了解一下，多图上传时...input id=upload type=file accept=image/* multiple=multiple> <button class=btn>点击上传</button> <div class=img-box> <!-- 存放预览图片 --> </div>
然后在CSS中定义`.custom-file-input`类： ```css .custom-file-input { display: inline-block; width: auto; /* 自适应宽度 */ margin: 10px; /* 添加边距 */ padding: 5px 10px; /* 添加内边距 */ font-...
HTML中的`<input type="file">`标签是实现这一功能的基础，但它的样式和交互性往往有限。本篇将详细介绍如何在非`<input>`标签（如`<span>`）上模拟`<input type="file">`的功能，并探讨uploadify插件的使用，以提升...
总之，在Firefox中，`<input type="file">`的`size`属性主要影响文件路径显示的字符数，而非控件的总体宽度。但通过这个属性和一定的计算，我们可以间接地调整控件的显示宽度，以满足页面布局的需求。同时，由于...
multiple属性适用于type="email"和type="file"的Input元素，使得用户可以在同一输入框中选择多个电子邮件地址或文件。例如，`<input type="file" name="img" multiple>`允许用户一次选择多张图片进行上传。 5. min...
六、文件上传输入（`<input type="file">`） 文件上传控件让用户选择本地文件并将其上传到服务器。例如： ```html <input type="file" name="uploadFile"> ``` 可以结合JavaScript进行文件类型和大小的验证。 七、...
- `<input type="file">` 用于让用户选择本地文件进行上传。 5. 下拉菜单： 使用 `<select>` 标签创建下拉菜单，`<option>` 标签定义可选项。`<optgroup>` 可用于对选项进行分组，如创建城市选择的下拉菜单。`...
<input id="File1" type="file" accept=".xls,.doc,.txt,.pdf" /> ``` `accept`属性值是一个逗号分隔的MIME类型列表或文件扩展名列表。在上面的例子中，`.xls`对应Excel文件，`.doc`对应Word文档，`.txt`对应纯文本...
<input type="file" name="uploadFile"> ``` **GET与POST的区别** - GET在URL中显示数据，POST则不显示，POST的安全性相对较高。 - GET有长度限制，一般不超过2KB，POST无大小限制，可传输大量数据。 **ACTION...
8. **文件上传**（`<input type="file">`）：让用户选择本地文件进行上传。 9. **标签**（`<label>`）：与表单控件配合使用，提供更好的用户体验，用户可以通过点击标签触发对应控件。 此外，还有`<textarea>`用于...
这里我们可以通过设置`<input type="file">`的样式使其隐藏，然后通过自定义样式来模拟一个文件选择按钮。 ```css .file-input-container { position: relative; } .file-input-container input[type=file] { ...
- `<input type="file">`是文件上传控件。 - `<input type="hidden">`是隐藏输入字段。 - `<input type="datetime-local">`、`<input type="month">`、`<input type="week">`等是日期和时间输入控件。 - `<input...
文本输入框（<input type="text">）、密码输入框（<input type="password">）、单选按钮（<input type="radio">）、复选框（<input type="...隐藏字段（<input type="hidden">）和文件域（<input type="file">）...
- **文件上传**：`<input type="file">` - **隐藏域**：`<input type="hidden">` - **按钮**：`<input type="button">` ##### 示例：文本框与按钮 在题目给出的部分内容中，`<input type=”botton” name=”…” ...
5. **文件上传** `<input type="file" name=" ">`：此元素让用户选择本地文件上传到服务器。`name`属性定义请求参数名。 6. **提交按钮** `<input type="submit" value="confirm">`：点击提交按钮会触发表单的提交...
- 文件上传：`<input name="photo" type="file" enctype="multipart/form-data" size="16" maxlength="200">`，用于上传个人写真。 - 文本区域：`<textarea name="intro" cols="28" rows="4" id="intro">...