美化上传文件框(上传图片框)

最新推荐文章于 2023-05-13 20:24:02 发布

VIP文章读着对白

最新推荐文章于 2023-05-13 20:24:02 发布

阅读量8.8k

点赞数 6

分类专栏： js 文章标签：美化上传图片框美化上传文件框美化表单表单 js美化表单

本文链接：https://blog.csdn.net/luoxuehui_blog/article/details/79158309

版权

传统的表单控件十分简陋，可以说是很难看，那怎么办？

方法:我们自己做一个好看的样式出来，用各种标签啊，css啊，是可以做到的。如图:

做出这样一个样子应该是很简单的，但是怎么让他具有上传的功能的呢？

那就使用代理的方法，点击上传就等于点击<input type="file">(上传文件表单控件)

废话不多说，直接上代码:

html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试插件</title>
<link rel="stylesheet" type="text/css" href="css/upload.css">
<style>
body{font-family:"微软雅黑";font-size:14px;}
.wrapper{width:800px;margin-right:auto;margin-left:auto;}
</style>
</head>
<body>
<br><br>
<h1 align="center">上传图片预览</h1>
<br><br>
<div class="wrapper">
<input type="file">
</div>
<script src="js/upload.js"></script>
</body>
</html>

css:

.file{
margin: 0;
padding: 0;
position:relative;
display:inline-block;
margin:0 10px;
vertical-align:top;}

.file img{
margin: 0;
padding: 0;
display:block;
margin-bottom:4%;
border-radius:4px;
border: none;
}
.file button{
margin: 0;
padding: 0;
border:0 none;
width:48%;
line-height:30px;
color:#fff;
border-radius:4px;
cursor:pointer;
outline:0 none;
font-family:inherit;
}

最低0.47元/天解锁文章

读着对白

关注

6
点赞
踩
12

收藏

觉得还不错? 一键收藏
3
评论
美化上传文件框(上传图片框)

传统的表单控件十分简陋，可以说是很难看，那怎么办？方法:我们自己做一个好看的样式出来，用各种标签啊，css啊，是可以做到的。如图:做出这样一个样子应该是很简单的，但是怎么让他具有上传的功能的呢？那就使用代理的方法，点击上传就等于点击(上传文件表单控件)废话不多说，直接上代码:html:测试插件body{font
复制链接

扫一扫