Javascript - 改变输入背景

Question

我有一个功能，当用户试图提交它时，将搜索框的背景改为红色，但它是空的，然后当用户点击它时将其更改回'无'，如下所示：

HTML：

<form action="http://www.google.com/search" id="search-box"> 
     <input type="search" name="q" id="q" /> 
     <input type="image" src="img/search.png" /> 
</form> 

的Javascript：

document.querySelector('#search-box').onsubmit = function() { 
    if (document.querySelector('#q').value == '') { 
     document.querySelector('#q').style.background = 'red'; 
     return false; 
    } 
} 

document.querySelector('#q').onclick = function() { 
    if (document.querySelector('#q').style.background == 'red') { 
     document.querySelector('#q').style.background = ''; 
     return false; 
    } 
} 

它的工作原理音响新的铬，但它不适用于Firefox ...任何想法为什么？

Answer 1

当你document.querySelector('#q').style.background它设置元素的背景属性background: none repeat scroll 0% 0% #F00;

达到你想要什么，设置...style.backgroundColor代替，这样

document.querySelector('#search-box').onsubmit = function() { 
    if (document.querySelector('#q').value == '') { 
     document.querySelector('#q').style.backgroundColor = 'red'; 
     return false; 
    } 
} 

document.querySelector('#q').onclick = function() { 
    if (document.querySelector('#q').style.backgroundColor == 'red') { 
     document.querySelector('#q').style.backgroundColor = ''; 
     return false; 
    } 
}