Question

我正在尝试在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%;
}

Answer 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>

使上传文件在div上不可见

1 个答案: