输入框的透明度影响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;
}
相关推荐
m0_616188494 分钟前
PDF预览-搜索并高亮文本
开发语言·javascript·ecmascript
美美打不死28 分钟前
webpack js 逆向 --- 个人记录
开发语言·javascript·webpack
我是哈哈hh1 小时前
【Vue】 核心特性实战解析:computed、watch、条件渲染与列表渲染
前端·javascript·vue.js·前端框架·vue·语法基础
前端Hardy1 小时前
HTML&CSS:超好看的收缩展开菜单
javascript·css·html
Riesenzahn1 小时前
你使用过css3的:root吗?说说你对它的理解
前端·javascript
前端Hardy1 小时前
HTML&CSS:哇塞!Three.js 打造的 3D 交互平面,鼠标滑动纹理如梦幻般变形!
javascript·css·html
Riesenzahn1 小时前
在js中undefined和undeclared有什么区别?
前端·javascript
打野赵怀真1 小时前
平时有经常用到nextTick吗?谈谈你对nextTick的理解。
前端·javascript
leopai1 小时前
面试官最喜欢问的:前端怎么自动检测代码更新?
前端·javascript·面试
小钰能吃三碗饭2 小时前
第一篇:【前端翻身计划】从菜鸟到高手,JavaScript ES6+实战秘籍揭秘!
前端·javascript·react.js