Input File 表单上传按钮美化

最新推荐文章于 2019-04-25 16:51:22 发布

weixin_30390075

最新推荐文章于 2019-04-25 16:51:22 发布

阅读量75

点赞数

原文链接：http://www.cnblogs.com/tealane/p/3301803.html

版权

`HTML`

<div class="input-file-button">
上传图片<input type="file" class="input-file" hidefocus />
</div>

CSS

.input-file-button {
  display:block;
  width: 200px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  color: #fff;
  font-size: 30px;
  font-family: "MicroSoft YaHei";
  text-shadow: 0px 0 5px #A74900;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  background: #EC6D0B;
}
.input-file {
  height: 80px;
  font-size: 200px;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  cursor: pointer;
}