`
conkeyn
  • 浏览: 1523441 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

【转】input(file)浏览按钮美化

 
阅读更多

转自:http://www.cnblogs.com/jason-liu-blogs/archive/2013/06/13/3133377.html

 

首先我们先要了解一下各浏览器的浏览按钮的共同特性:

    1、都可以设置整体的宽度和高度,但在IE、火狐、Opera中设置宽度不影响浏览按钮的宽度;

    2、谷歌中只要是input的区域单击可弹出窗口;IE(IE6中没试)中,单击浏览按钮可以弹出窗口,双击文本框区域可以弹出窗口;火狐和Opera中,单击input任何区域都可以弹出窗口;

    3、设置input字体大小,IE、火狐、Opera的流量按钮都变大了(宽与高)。(这点很重要);

从上面的共同特性来看,只要第三条是我们最需要的。

 

现在我们可以开始美化了:

        思路:先用a标签做一个按钮,定好宽度并要加上overflow:hidden;属性,然后将<input type="file" />放在a标签里面,通过定位,将input相对于a的右上角对齐,最后将input的透明度设为0即可。

        为何要右上角对齐?

                之所以右上角对齐是因为在IE、火狐、Opera中,鼠标放在文本框上鼠标呈文本状态,还有一个原因是IE中在文本区域中需要双击才能弹出窗口,这也是我利用上面提到的共同特性的第三点的原因。

        示例代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Input(File)美化测试页面</title>
<style>
a {
	display: inline-block;
	width: 100px;
	height: 40px;
	background: red;
	position: relative;
	overflow: hidden;
}

a:hover {
	background: green;
}

input {
	position: absolute;
	right: 0;
	top: 0;
	font-size: 100px;
	opacity: 0;
	filter: alpha(opacity = 0);
}
</style>
</head>
<body>
	<div style="position: absolute; top: 500px; left: 500px;">
		<a href="#">
			<input type="file" value="浏览" />
		</a>
	</div>
</body>
</html>

 

这样各个浏览器的input浏览按钮的样式就达到了一致的效果,file按钮样式美化搞定。

分享到:
评论

相关推荐

    css美化input file按钮的方法

    如果要让浏览按钮更漂亮一点,我们想定义它的背景颜色,甚至想用...偶然看到一篇文章:input file 文件选择框美化 作者是把系统默认的按钮设置透明度为0,再定义一个label标签样式,来覆盖透明掉的按钮。支持IE6\IE7\FF

    文件上传input file简便美化方案(css)

    在HTML结构中,我们通常会隐藏原生的file input,然后在上面覆盖一个自定义样式的按钮和一个用于显示文件路径的文本框,以便用户点击这个“按钮”来打开文件选择对话框。这里的“假”上传按钮(.file-uploader-wrap-...

    上传控件input file 样式美化

    默认的`&lt;input type="file"&gt;`按钮样式各异,不符合现代网页设计的需求。我们可以将其设置为透明或者绝对定位,使其隐藏在其他元素后面,从而实现自定义按钮的效果。 ```css input[type="file"] { opacity: 0; ...

    上传按钮file美化

    在本主题中,我们将深入探讨如何实现“上传按钮file美化”,以创建一个类似微博的图片上传界面,同时确保跨浏览器的兼容性。我们将讨论如何自定义图片、样式以及按钮上的文字,以提升用户体验。 首先,我们需要了解...

    input file自定义按钮美化(演示)

    如果可以不要看到路径,只显示自定义按钮,另有其方法,下面只是用用了css的技巧来实现。 关键是给file文件域给了font-size,设置一个比较大的值,使其表单大写发生改变(各浏览器外观不同,但大写都改变了)如下图:...

    美化file或修改file类型按钮上的“浏览”

    这样,我们就实现了美化file类型按钮并用英文替代了默认的“浏览”文字。不过,对于更复杂的场景,可能还需要考虑无障碍性(accessibility)问题,确保屏幕阅读器等辅助技术能正确识别和使用这个元素。此外,还可以...

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

    "input file选择文件之后自动上传(样式自定义美化)"这个主题聚焦于一个常见但有时被忽视的用户体验改进点:如何在用户选择文件后立即启动上传,并且在上传过程中保持界面的美观与友好。下面将详细介绍这一过程涉及...

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

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

    图片代替文件浏览按钮样式

    "图片代替文件浏览按钮样式"就是一个这样的实践,它通过CSS样式和图像资源来定制HTML中的`&lt;input type="file"&gt;`元素,使其看起来更加友好且具有设计感。这个项目特别强调了兼容性,确保在IE、Firefox、Chrome等主流...

    jquery 美化下拉框,单选按钮,上传文件input typeFile的插件

    在这个特定的场景中,我们关注的是如何使用`jQuery`来美化通常较为单调的HTML元素,如下拉框、单选按钮和上传文件的`input[type="file"]`元素。`pixelmatrix-uniform-2446d99`这个压缩包文件很可能包含了`jQuery`的...

    css美化input file按钮的代码方法

    要解决这一问题,一种常见的技巧是利用`label`元素与`input[type=file]`关联,通过CSS隐藏原始的文件选择按钮,并创建一个自定义的“浏览”按钮。这种方法的核心思想是将文件选择按钮的透明度设为0,使其不可见,...

    美化file input

    在CSS方面,由于file input的样式很难直接控制,我们通常会采用“隐藏原生input,创建自定义按钮”的方法。例如: ```css #customFileInput { display: none; } #customFileInput + label { background-color: #...

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

    然后,我们通过CSS来美化`&lt;input type="file"&gt;`元素。这里创建了一个`.file`类,应用了一些基本的样式,比如宽度、高度、边框、背景色等,使其看起来更加友好。同时,为了让“选择文件”按钮更加易用,我们使用了...

    关于input的file 控件及美化

    这篇文章主要介绍如何使用file类型的input控件,并提供了关于如何美化该控件的技巧和方法。 首先,关于file类型input的基础使用方法,如文章所示,可以通过设置一个简单的HTML结构来创建一个文件输入控件。以下是...

    上传按钮美化

    "上传按钮美化"是提升网页交互体验的一种方式,它旨在通过创新的设计和友好的操作方式,使得文件上传变得更加吸引人且方便。在本教程中,我们将探讨如何将传统的文字式上传按钮转化为具有视觉吸引力、可点击图片的...

    jquery封装的input file控件

    例如,可以创建一个CSS类来美化按钮,然后使用jQuery将这个类应用到`&lt;input&gt;`元素上: ```html .custom-file-input { /* 自定义样式的CSS代码 */ } &lt;div class="custom-file-input"&gt; &lt;input type="file" id=...

    定义input type=file 样式的方法

    原始的`file`控件通常呈现为一个简单的文本框和一个"浏览"按钮,其外观朴素且难以与页面其他元素融合。通过自定义CSS样式和HTML结构,我们可以改变这一状况,使其与其他元素保持一致。 要美化`file`控件,一种常见...

    美化File控件-图片按键上传文件

    【标题】"美化File控件-图片按键上传文件"涉及的知识点主要集中在前端网页的文件上传功能上,尤其是如何在用户界面中实现美观且实用的文件上传组件。在这个主题下,我们将探讨HTML5的File API、CSS样式美化、...

Global site tag (gtag.js) - Google Analytics