I'm in the process of redesigning a website for a friend from school. Along the way I've encountered a weird bug in Google Chrome: I've styled the contact form (very basic, an input each for name and email address and a textarea for comments) using a CSS3 gradient background.
Everything works fine – until you click inside a field to enter data, whereupon the name input and textarea take on the background colour of their parent form element. The email input, meanwhile, retains the gradient both when focussed and when not (as desired).
Please visit http://www.chrisphilpot.co.uk/lucycooper2012/ to see what I am getting at. As I say, it seems to look fine in Firefox and IE9 picks up on the flat background #FFF which will do for the time being!
Do you have any bright ideas to fix this? I've relinked the page to the full, uncompressed CSS so feel free to have a rummage. The main styles for the form are in: http://www.chrisphilpot.co.uk/lucycooper2012/css/form.css
Thank you for your help and time!