.css('background') support in FF 11
HTML
<section>
<input type='text' id="s" name='s' value=''/>
<header>Input field above should have a gradient (light to dark from top to bottom) with a magnifying glass icon overlaid on the right hand side that vanishes (along with the gradient) when the field is focused, and returns when focus leaves the field.</header>
<p>Firefox 11/IE 9 Bugs</p>
<ol>
<li><tt>.css("background")</tt> returns empty string (or null) in Firefox 11.</li>
<li>additionally, manipulating it to add a css3 multiple-background magnifying glass also fails.</li>
<li>additionally FF 11 fails to <tt>.blur()</tt> back to the gradient background after clicking in the field and back out again.</li>
</ol>
<aside><q>note: apparently this is known behaviour for .css(border|background|margin) shorthand properties as browser support for this is inconsistent .. one should use the full longhand versions instead. see <a href="http://jsfiddle.net/WebDragon/wkSBX/34/">a later version of this fiddle</a> for the working version</q></aside>
</section>
CSS
input#s {
color: black;
margin: 1em;
padding: 4px 28px 4px 10px;
font-size: 14px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
outline: none; border: 0;
-webkit-box-shadow: inset 0 0 4px black;
-moz-box-shadow: inset 0 0 4px black;
box-shadow: inset 0 0 4px black;
height: 22px;
background: rgb(192,201,208); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjU4JSIgc3RvcC1jb2xvcj0iI2Q1ZGZlMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg1JSIgc3RvcC1jb2xvcj0iI2MwYzlkMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWI4YzMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(213,223,225) 58%, rgb(192,201,208) 85%, rgb(170,184,195) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(58%,rgb(213,223,225)), color-stop(85%,rgb(192,201,208)), color-stop(100%,rgb(170,184,195))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(255,255,255) 0%,rgb(213,223,225) 58%,rgb(192,201,208) 85%,rgb(170,184,195) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(255,255,255) 0%,rgb(213,223,225) 58%,rgb(192,201,208) 85%,rgb(170,184,195) 100%); /* Opera 11.10+...
JavaScript
jQuery(document).ready(function($) {
var searchbox = $('input#s');
var searchbg = searchbox.css("background");
console.log(searchbg);
var tel = "url('http://360.client-proof.com/wp-content/themes/360marketing/images/magnifier.png') no-repeat 95% 50%" + "," + searchbg;
searchbox.css({
"background": tel
});
console.log(searchbox.css('background'));
searchbox.focus(function() {
$(this).css({
"background-color": "rgb(220,220,220)"
});
});
searchbox.blur(function() {
$(this).css({
"background-color": tel
});
});
});