自定义上传文件的样式

最新推荐文章于 2024-08-12 09:24:46 发布

Promic

最新推荐文章于 2024-08-12 09:24:46 发布

阅读量316

点赞数

文章标签： stylesheet xhtml javascript class filter input

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="/min/b=wp-content/themes/mangguo/css&f=reset.css,example.min.css" rel="stylesheet" />
<style>
.input-file {
	display:inline-block;
	width:100px;
	height:30px;
	line-height:30px;
	background:#ddd;
	text-align:center;
	overflow:hidden;
	position:relative;
}
.input-file:hover {
	background:#ccc;
}
.input-file input {
	opacity:0;
	filter:alpha(opacity=0);
	font-size:100px;
	position:absolute;
	top:0;
	right:0;
}
</style>
</head>

<body>

1..<input type="file">
<br/>2.<span class="input-file">浏览...<input type="file"></span>
<br/>3.<a href="javascript:void(0);" class="input-file">浏览...<input type="file"></a>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Promic

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义上传文件的样式

无标题文档.input-file { display:inline-block; width:100px; height:30px; line-height:30px; background:#ddd; text-align:center; overflow:hidden; position:relative;}.input-file:hover
复制链接

扫一扫