I'm currently working on incorporating a profile picture input in a form that allows users to select a new image when clicked. The standard method seems to involve using an input with the type of "file" and then hiding it using different techniques. I personally find setting opacity:0 as the most viable option, as it keeps the element in the DOM while still detecting clicks or focus.
However, having an input with zero opacity also means that there won't be a visible focus ring even when the element is technically in focus. What are my options to ensure that a focus ring appears when the input is focused? Thank you for your help.
.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>