input[type="file"] CSS

最新推荐文章于 2022-05-22 15:44:43 发布
最新推荐文章于 2022-05-22 15:44:43 发布
阅读量76 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/mguo/archive/2013/04/23/3039280.html
版权

1.原理

基于安全性考虑，IE不支持用程序设置input type=file的值。

所以不能直接用<input type="text"/>和<input type="button"/>代替，

CSS美化file组件的方法是使用position属性将file组件置于<input type="text"/>和<input type="button"/>之上，

然后使其全透明化，操作时使用户感觉在操作<input type="text"/>和<input type="button"/>，实际上还是在操作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">
.type-file-box {
position:absolute;
width:260px
}

input {
vertical-align:middle;
margin:0;
padding:0
}

.type-file-text {
height:22px;
border:1px solid #cdcdcd;
width:180px;
}

.type-file-button {
background-color:#FFF;
border:1px solid #CDCDCD;
height:24px;
width:70px;
}

.type-file-file {
position:absolute;
top:0;
right:0;
height:24px;
filter:alpha(opacity:0);
opacity: 0;
width:260px
}
</style>
</head>
<body>
<div class="type-file-box">
<form action="" method="post" name="form1" id="form1">
<input type='text' name='textfield' id='textfield' class='type-file-text' />
<input type='button' name='button' id='button' value='浏览...' class='type-file-button' />
<input name="fileField" type="file" class="type-file-file" id="fileField" size="28" οnchange="javascript:document.getElementById('textfield').value=this.value;"/>
</form>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/mguo/archive/2013/04/23/3039280.html

weixin_30357231
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css input[type=file] input[type=radio] input[type=checkbox]样式美化，input上传按钮美化
zhouweixue_vivi的博客
10-26 1061
一、css input[type=file] 样式美化，input上传按钮美化 我们在做input文本上传的时候，html自带的上传按钮比较丑，如何对其进行美化呢 思路： input file上传按钮的美化思路是，将input file从页面隐藏掉，然后使用div加button等元素模拟文件上传的选择框，最后使用js触发input file的点击事件 代码如下： DOM结构：
input type="file" CSS
fengguowusheng的博客
11-28 530
1.原理 基于安全性考虑，IE不支持用程序设置input type=file的值。 所以不能直接用&lt;input type="text"/&gt;和&lt;input type="button"/&gt;代替， CSS美化file组件的方法是使用position属性将file组件置于&lt;input type="text"/&gt;和&lt;input type="but
CSS美化 input type=file 兼容各个浏览器（转）
weixin_33674437的博客
11-18 117
HTML代码： &lt;FORM&gt; &lt;A class=btn_addPic href="javascript:void(0);"&gt;&lt;SPAN&gt;&lt;EM&gt;+&lt;/EM&gt;添加图片&lt;/SPAN&gt; &lt;INPUT class=filePrew title=支持jpg、jpeg、gif、
html5 file样式,如何用纯css实现input[type=file]的样式控制（代码示例）
weixin_30953203的博客
06-15 364
本篇文章给大家分享的内容是关于如何用纯css实现input[type=file]的样式控制(代码示例)，有需要的朋友可以参考一下。如果您搜索有关如何进行完全外观控制的常见问题的解决方案，则结果可能适合以下3个类别之一：需要Javascript。在主浏览器中不起作用。实际上并没有提供完整的风格控制。上述三个肯定适合我在网上找到的每一个答案。但你可以用纯CSS做到这一点。它需要一个包装元素来挂钩样式(...
input[type=file] CSS样式
weixin_33933118的博客
10-20 135
input[type=file]这个东西直接放在页面上是这样的。巨丑！，直接用CSS对这个input改样式的话，它会对按钮以及后面的文字同时动作。因为他们是一个整体。 所以，我们需要先把原来的按钮透明度opacity设置为0，在它的外层用div包裹它，然后对这个div进行样式更改，这样我们就可以来画一个美美的上传文件啦 ! DOM结构： css样式： .a_upload { padd...
css input[type=file] 样式美化(input上传文件样式 )
09-24
本教程将详细介绍如何使用CSS对`input[type=file]`进行样式美化，使文件上传按钮更加符合网站的整体风格。 首先，我们来看一个简单的例子。在这个例子中，我们创建了两个不同的样式来展示如何自定义文件上传按钮： ...
定义input type=file 样式的方法
12-14
`<input type="file">`被定位在模拟的文本框和按钮之上，通过CSS设置`opacity: 0`或`filter: alpha(opacity: 0)`使其不可见，同时保留其功能。 对应的CSS样式可能如下： ```css .file-box { position: relative; ...
HTML input type=file文件选择表单元素.docx
11-22
一、input type=file 文件选择表单元素 input type=file 是 HTML 中的一种表单元素，用于选择文件并上传到服务器。HTML5 之前的 input type=file 元素只能一次上传一张图片，无法满足一次上传多图的交互需求。因此...
CSS美化 input type=file 兼容各个浏览器
09-25
在网页设计中，CSS美化`<input type="file">`元素常常是一项挑战，因为不同的浏览器对这个元素的默认样式和行为处理方式各异。为了解决这个问题，开发者们需要找到一种跨浏览器的解决方案来统一表现。这里介绍一种纯...
为type=file的input标签制定样式——CSS基础
qq_41297145的博客
06-25 1426
为type=file的input标签制定样式1. 概述2. 实验3. 解决方法与解析 1. 概述 在现在的前端开发中，为了开发的效率，大都会引入第三方库加快开发速度。查阅官方文档，一顿复制黏贴，是的，这就是面向百度、面向谷歌编程，但是基础总是重要的——本文章记录一下之前遇到的小坑，并对其进行解析。 2. 实验 实验目的：我们想要为type=file的input标签制定样式 默认的样式如图 <input type="file"> 现在我们想要改成下图的效果 然后我们直接用行内样式来书写 &
HTML中文件上传时使用的<input type="file">元素的样式自定义
09-28
主要介绍了HTML中文件上传时使用的<input type="file">元素的样式自定义的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
css input[type=file] 样式美化，input上传按钮美化
qq_31528289的博客
04-15 542
href="javascript:;" class="a-upload"> type="file" name="" id="">点击这里上传文件 href="javascript:;" class="file">选择文件 type="file" name="" id=""> /*a upload */ .a-upload { paddin
CSS3 input[type=file] 样式美化，input上传按钮美化
Robin罗兵
05-25 9666
html自带的上传按钮非常丑，在HTML4+CSS2时，想要美化文件上传还是很麻烦了。 HTML5+CSS3后，就非常方便了，实例如下： 思路： input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。 代码如下： DOM结构： 1 2 a h
css修改input type="file" 样式的方法
weixin_30853329的博客
09-17 411
首先找到了一个网站，可以参考这个网站http://www.quirksmode.org/dom/inputfile.html 另外我们可以想办法把file的背景颜色去掉，position=absolute,z-index=-1，这样隐去file,然后用label 标签里边加上文字，设置样式，具体代码如下 <div style="margin-bottom:20px;"&g...
修改默认input type=file 样式
weixin_30808693的博客
06-29 114
默认的实在是。。。 我们来看看怎么定制自己的文件上传样式。 思路很简单，就是自己画一个我们想要的样式，把默认的隐藏。 html css 效果 上面的方法最重要的是给input设置opacity为0隐藏，然后将它利用定位和我们自己画的a重合起来。 转载于:https://www.cnblogs.com/Dengxiaobo/p/9242496.ht...
input[type="file"]样式修改
热门推荐
feinifi的博客
01-30 2万+
默认情况下，html中的&lt;input type="file"/&gt;标签展示的效果是自带的，为了美观和体验，我们需要对他进行一番修饰，让他看起来，更加的优雅。修饰的思路是，让一个按钮替代原来的样式。点击按钮和点击原来的选择文件元素是一样的效果。我们可以考虑让input的父级元素相对定位，然后让input元素绝对定位，并且可见度为0，就是看不见，但是点击也能出现选择文件的效果，input元素...
＜input type=“flie“＞上传文件
m0_63574519的博客
05-22 315
使用<input type="file">和JS实现上传图片操作。 1.先写出css样式，这里采用了响应式布局，写的移动端样式。 <style> * { padding: 0; margin: 0; list-style: none; } html { font-size: 62.5%; } body {
input file详细介绍、更改css样式、获取图片地址、彻底清空上传文件（建议收藏）
AC_Surprise的博客
09-02 1万+
介绍 input 全部类型 input 框的类型到底有多少种呢，零零散散算下来有二十多种 总述 常用的并且能为大多数浏览器所识别的类型大概有：text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。 另外还有一些类型：tel、email、url、datetime、search。这些类型部分浏览器不支持识别或校验。 text
input type=file 按钮修改样式
最新发布
05-18
要修改input type=file按钮的样式，可以使用CSS来实现。但是由于input type=file的设计，只有很少的CSS属性可以应用于它。所以，我们需要使用一些技巧才能改变它的外观。以下是一些实现方法： 方法一：使用label元素代替input元素，并使用CSS样式来美化label元素。 HTML代码： ``` <label for="file-upload" class="custom-file-upload"> <i class="fa fa-cloud-upload"></i>选择文件 </label> <input id="file-upload" type="file"/> ``` CSS代码： ``` .custom-file-upload { display: inline-block; padding: 6px 12px; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; } .custom-file-upload:hover { background-color: #f5f5f5; } .custom-file-upload i { margin-right: 5px; } ``` 方法二：使用伪元素和背景图片来美化input元素。 HTML代码： ``` <input type="file" class="custom-file-input"/> <label class="custom-file-label" for="custom-file-input">选择文件</label> ``` CSS代码： ``` .custom-file-input { position: absolute; left: -9999px; } .custom-file-label { display: inline-block; padding: 6px 12px; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; font-weight: normal; background-image: url('file-upload.png'); background-repeat: no-repeat; background-position: center; background-size: 16px; padding-left: 24px; } .custom-file-label:hover { background-color: #f5f5f5; } ``` 其中，file-upload.png是一个上传图标的图片。 以上两种方法都可以实现美化input type=file按钮的效果。您可以根据自己的需求选择其中一种方法进行使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值