입력 상자의 투명도가 자리 표시자의 투명도에 영향을 미치는 문제를 해결하는 방법

위와 같이 입력란을 작성해야 한다는 요구사항이 있습니다.
가장 먼저 떠오르는 것은 입력의 투명도를 조정하는 것입니다.

<div class="inputDiv">
      <img src="./images/search.png" />
      <input type="text" class="myInput" placeholder="请输入标题关键字"/>
</div>

.inputDiv{
    
    
    border-radius: 16px;
    height:3.2rem;
    width:32rem;
    margin-top:0.7rem;
    display: flex;
    align-items: center;
    padding-left:0.9rem;
}
.myInput{
    
    
    height:3.2rem;
    opacity: 0.24;
    padding:0;
    padding-inline:0;
    padding-block:0;
    border-width:0;
    width:27.5rem;
    font-size: 1.4rem;
    color: #FFFFFF ;
}
.myInput::placeholder {
    
    
    color: #FFD6B5 ;
    font-size: 1.4rem;
    line-height: 3.2rem;
    text-align: center;
}

이러한 방식으로 자리 표시자의 투명도가 입력 상자의 투명도에 영향을 받는다는 것을 알 수 있습니다.

배경색으로 투명도를 구현하면 이런 문제는 발생하지 않습니다
최종 구현 계획

.inputDiv{
    
    
    background-color: rgba(255, 255, 255, 0.24);
    border-radius: 16px;
    height:3.2rem;
    width:32rem;
    margin-top:0.7rem;
    display: flex;
    align-items: center;
    padding-left:0.9rem;
}
.inputDiv img {
    
    
    width:1.8rem;
    height:1.8rem;
}
.myInput{
    
    
    height:3.2rem;
    background-color: rgba(255, 255, 255, 0);
    padding:0;
    padding-inline:0;
    padding-block:0;
    border-width:0;
    width:27.5rem;
    font-size: 1.4rem;
    color: #FFFFFF ;
}
.myInput::placeholder {
    
    
    color: #FFD6B5 ;
    font-size: 1.4rem;
    line-height: 3.2rem;
    text-align: center;
}