인프런 커뮤니티 질문&답변

.item input:focus .fa-solid {background-color:dodgerblue;} 의 폰트어썸의 백그라운드 색상이 변하질 않습니다...item input:focus {border: 1px solid dodgerblue;box-shadow: 0 0 5px dodgerblue;} 요 부분은 잘 작동합니다!/* html */ <form action="info"> <div class="item"><i class="fa-solid fa-user"></i><input type="text" placeholder="Your Name"></div><div class="item"><i class="fa-solid fa-envelope"></i><input type="email" placeholder="Email"></div><div class="item"><i class="fa-solid fa-phone"></i><input type="tel" placeholder="Phone Number"></div></form>  /* CSS */ body { margin: 0;display: flex;justify-content: center;align-items: center;height: 100vh; /*높이값 있어야 수직정렬됨*/font-family: sans-serif;}a {text-decoration: none;}.item {margin: 10px;width: 300px;position: relative;}.item input {border: 1px solid lightgray;width: inherit;height: 40px;padding: 10px;box-sizing: border-box;border-radius: 5px;outline: none;padding-left: 50px;transition: 0.5s;
}.item .fa-solid {position: absolute;top: 0;left: 0;height: 40px;line-height: 40px;width: 40px;text-align: center;color: #fff;background-color: gray;border-radius: 5px 0 0 5px;transition: 0.5s;}.item input:focus {border: 1px solid dodgerblue;box-shadow: 0 0 5px dodgerblue;}.item input:focus .fa-solid{background-color: dodgerblue;}.item input:focus::placeholder {visibility: hidden;}