我试图在 div 按钮上放置一个不可见的上传文件按钮，但位于 div 中心的图标不可点击。 div 的其余部分是可点击的，但图标不是。任何人都可以帮助我使其可点击吗？
html:
<div class="phoneUpload">
<input type="file" class="file" (change)="uploadImage($event)" />
<ion-icon name="add" class="addIcon"></ion-icon>
<h5 class="uploadText"> Upload </h5>
</div>
CSS:
phoneUpload {
flex: 1;
height: 150px;
width: 150px;
margin-left: 7%;
margin-right: 10%;
background: #F8DE7E;
.file {
height: 150px;
width: 150px;
opacity: 0;
}
.addIcon {
font-size: 40px;
color: #9174d6;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -65%;
}
.uploadText {
text-align: center;
color: #9174d6;
font-size: 12px;
font-family: "Open Sans";
margin-top: -1%;
}
最佳答案
使用这个对我来说效果很好。
.phoneUpload {
height: 150px;
width: 150px;
background: #F8DE7E;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
margin:0 auto
}
.addIcon {
font-size: 40px;
color: #9174d6;
display: block;
margin-left: auto;
margin-right: auto;
}
.uploadText {
text-align: center;
color: #9174d6;
font-size: 12px;
font-family: "Open Sans";
}
input.uploadimghide {
position: absolute;
height: 100%;
opacity: 0;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="phoneUpload">
<input class="uploadimghide" type="file" class="file" (change)="uploadImage($event)" />
<ion-icon name="add" class="addIcon"></ion-icon>
<h5 class="uploadText"> Upload </h5>
</div>
</body>
</html>关于html - 使上传文件在 div 上不可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59352531/