gpt4 book ai didi

html - 使上传文件在 div 上不可见

转载 作者:太空宇宙 更新时间:2023-11-04 05:39:14 26 4
gpt4 key购买 nike

我试图在 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com