html - 在带有颜色的 div 前面放置一个输入，并保持输入白色背景和图像

Question

我有一个位于 div 内部的输入。当我设置 div 背景颜色时，它也会更改输入背景颜色。输入有背景图像，所以我不能简单地为输入设置背景颜色。

因此，我需要一种方法来更改 div 内部输入的背景颜色，同时保留 div 的背景图像。

CSS:

#searchDiv{
    background:#606060;
    position:relative;
}
#topSearch{
    font: 40px Segoe UI Light;
    width:94%;
    height:60px;
    text-indent: 62px;
    background:white;
    background: url('search_icon.png');
    background-repeat: no-repeat;
    background-position: left; 
  background-size: 60px;
  margin: 10px 3% 10px 3%;
}

HTML:

<div id="searchDiv">
    <input type="search" id="topSearch"></input>    
</div>

Answer 1

像这样更改输入的样式:

    #topSearch {
    font: 40px Segoe UI Light;;
    width:94%;
    height:60px;
    text-indent: 62px;
    background-color:white;
    background-image: url('search_icon.png');
    background-repeat: no-repeat;
    background-position: left; 
    background-size: 60px;
    margin: 10px 3% 10px 3%;
}