type=file按钮样式改造

来源:互联网 发布:js getjson 获取数据 编辑:程序博客网 时间:2024/06/04 00:53

html:

<div class="file-wrap"><input type="file" id="myfile" name="myfile" accept=".png,.jpeg,.jpg,.gif"/>选择图片</div>

css:

.file-wrap {position: relative;width: 119px;height: 37px;border-radius: 4px;background-color: #ed4040;background-repeat: no-repeat;background-position: 0 0;background-attachment: scroll;line-height: 37px;text-align: center;font-size: 16px;color: white;cursor: pointer;overflow: hidden;float: left;margin-right: 20px;z-index: 1;}.file-wrap input {position: absolute;width: 119px;height: 40px;line-height: 40px;font-size: 0;opacity: 0;-moz-opacity: 0;left: 0px;top: 0px;cursor: pointer;z-index: 2;}


font-size:0;是关键。


阅读全文
0 0