输入框的透明度影响placeholder的透明度怎么解决

有一个需求是需要写如上图所示的输入框。

首先想到的是调整输入的透明度

javascript 复制代码
<div class="inputDiv">
      <img src="./images/search.png" />
      <input type="text" class="myInput" placeholder="请输入标题关键字"/>
</div>
javascript 复制代码
.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中实现就会没有这个烦恼了

最终实现方案

javascript 复制代码
.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;
}
相关推荐
aesthetician2 小时前
Node.js v25 重磅发布!革新与飞跃:深入探索 JavaScript 运行时的未来
javascript·node.js·vim
demi_meng5 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
千码君20166 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
EndingCoder8 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js
我胡为喜呀9 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
liangshanbo121511 小时前
React 19 vs React 18全面对比
前端·javascript·react.js
Never_Satisfied11 小时前
在 JavaScript 中,删除数组中内容为xxx的元素
java·前端·javascript
_菜鸟果果11 小时前
Vue3+echarts 3d饼图
前端·javascript·echarts
rechol12 小时前
类与对象(中)笔记整理
java·javascript·笔记
Luffe船长12 小时前
前端vue2+js+springboot实现excle导入优化
前端·javascript·spring boot