我正在构建一个表单中的输入，其中包含一个个人资料图片，当点击时，将允许用户 Select 一个新的图像.看起来常见的做法是使用"文件"类型的输入，然后通过各种方法隐藏它.对我来说，设置opacity:0似乎是唯一合法的 Select ，因为这将使元素保留在DOM中，并且它仍然会检测点击或焦点.
然而，没有不透明度的输入也不会有可见的焦点环，即使该元素在技术上处于焦点中.我有什么 Select 可以 Select ，以便在聚焦时有一个焦点环秀？提前谢谢您.
.profile-pic {
width: 156px;
height: 156px;
border-radius: 50%;
position: relative;
/* overflow: hidden; */
}
.profile-pic input[type='file'] {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
border: none;
border-radius: 50%;
cursor: pointer;
z-index: 10;
}
.profile-pic__img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
z-index: 1;
}
.profile-pic__img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.65);
transition: filter 0.2s ease-in-out;
cursor: pointer;
}
.profile-pic__img img:hover {
filter: brightness(0.5);
}
.profile-pic__text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
display: flex;
flex-direction: column;
align-items: center;
z-index: 5;
}
.profile-pic__text .fa-camera {
color: #fff;
}
.profile-pic span {
color: #fff;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
width: 90%;
}<div class="profile-pic">
<input type="file" />
<div class="profile-pic__img">
<img src="[TEST_URL]" alt="" />
</div>
<div class="profile-pic__text">
<i class="fas fa-camera"></i>
<span>Click to change photo</span>
</div>
</div>