很多人说网页中的样式是很难修改的,事实上也是,bootstrap也没用对其有什么美化,但是那么丑,要怎么修改呢?
其实很简单!!!很多人都想复杂了。
先卖个关子,有些人是这么做的,另外写一个按钮的样式,然后将自己写的按钮和这个默认的样式的定位改为重合,并将默认的按钮设置opacity:0,即设置透明度为完全透明,这样就可以在表面上是点击自己定义的样式,而实际上是点击input这个按钮。这正是这篇博客所说:https://blog.csdn.net/dear_mr/article/details/56040549
可是让这两个东西完全重合,不是很麻烦的一件事情么,这个想法可以去回答知乎的:有哪些看似精妙实际很蠢的设计
从上面的方法中得到了如下思路,下面进入最简单的方法:
1、重写一个新的样式
2、将默认样式设置display:none;,即设为不可见
3、在js里调用:当点击新样式的时候,调用这个input的点击事件
下面附上简单的代码吧,我的js用了jquery框架
html: 两种可供选择:
这是点击图片弹出文件选择框:
<div class="head-img">
<img alt="" src="./img/3.jpg" id="my-img">
<input type="file" id="img-upload" />
</div>
这是点击文字弹出文件选择框:
<a href="javascript:void(0);" id="my-img">上传图片</a>
<input type="file" id="img-upload" name="c_usersinfor_images" onchange="preview(this,'updateImg')" />
css:
.head-img {
text-align: center;
}
#img-upload {
display: none;
}
js:
$(document).ready(function (){
$('#my-img').click(function(){
$('#img-upload').click();
});
});
点击图片即可弹出弹出文件选择框啦
原创链接 原文:https://blog.csdn.net/qq_32623363/article/details/80878408
参考原创,检验可用,很棒