Расположите вход перед 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%; 
} 

Answer 2

добавить важный для вашей входной цвет фона

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

Answer 3

попробуйте фон: #fff url ('search_icon.png') no-repeat center left; или если вы объявляете несколько фонов, как показано в вашем коде, запятая их разделить

Answer 4

В вашем css для #TopSearch у вас есть атрибут «background» дважды. Он всегда будет читать последний. Поэтому даже подумал, что вы устанавливаете его на белый, вы переписываете его с помощью следующей строки для изображения.

Изменить

background: white; 

в

background-color: white; 

И изменить

background: url('search_icon.png'); 

в

background-image: url('search_icon.png');