改变input[type=file]的默认样式

daxiangya6845

于 2017-02-09 22:23:00 发布

阅读量72

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/weizaiyes/p/6384453.html

本文介绍了一种使用CSS和HTML实现自定义文件上传按钮样式的技巧。通过设置input元素为透明，并利用绝对定位覆盖在定制的div元素上，可以创建美观且功能完整的上传按钮。这种方法不仅提高了用户界面的美观度，还增强了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义上传按钮样式的终极解决方案--input透明法

<style>

.div1{

float: left;

height: 41px;

background: #f5696c;

width: 144px;

position:relative;

}

.div2{

text-align:center;

padding-top:12px;

font-size:15px;

font-weight:800

}

.inputstyle{

    width: 144px;

    height: 41px;

    cursor: pointer;

    font-size: 30px;

    outline: medium none;

    position: absolute;

    filter:alpha(opacity=0);

    -moz-opacity:0;

    opacity:0; 

    left:0px;

    top: 0px;

}

</style>

<div class="div1">

    <div class="div2">上传图片</div>

    <input type="file" class="inputstyle">

</div>

如此就可以是实现“点击$(".div2")上传文件”的效果了。

转载于:https://www.cnblogs.com/weizaiyes/p/6384453.html