发布：2023/12/16 12:53:40作者：管理员 来源：本站 浏览次数：229
有一个需求是需要写如上图所示的输入框。
首先想到的是调整输入的透明度
<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;
}
这样会发现placeholder的透明度也会被输入框的透明度影响
如果把透明度放在background-color中实现就会没有这个烦恼了
最终实现方案
.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;
}
