How do I style text fields in Safari and Chrome - html

Question

I haven't tested it on IE quite yet.
I want to style the background image and text box shape as well as borders for my search bar on my site, [dead site].
If you visit it on Firefox or Opera and see the search bar on the left column, that's what I am going for. Now if you visit it on Safari or Chrome, you should see that it is replaced by their default input text field, which makes the text illegible.
How do I style my text-box even on these browsers?

Answer 1

To be clear, on your site you are actually styling a search field and not a text field.
<input type="search"> <!-- This is what you have -->
vs
<input type="text">
To remove the default styling and allow your css properties to work you need to change the -webkit-appearance property. This should do the trick:
#s {
min-width:98%;
background-color:#2a2a2a;
color:#d3d3d3;
border:2px solid #000000;
font-size:.85 em;
height:1.9em;
display:inline !important;
border-radius:5px 5px 5px 5px;
outline:none;
-webkit-appearance: none; /* add this */
}

Answer 2

style.css
body {
background: #999 url(your_image_here.jpg);
}
.search {
width: 295px; /* 300px less the 5px of left padding*/
height: 30px;
line-height: 30px; /* same as height, then you can vertically align the text in the middle*/
vertical-align: middle;
font-size: 24px; /* this gives 3px at the top and bottom */
background-color:#ccc; /* a light grey background in the text box */
color:#333; /* dark grey font colour */
padding-left: 5px; /* spacing (padding) within the left hand side of the text box */
border: 1px solid #000; /* 1px wide black border around the text box */
display:inline !important;
border-radius:5px 5px 5px 5px; /* slightly rounded corners, the order of the values is TOP RIGHT BOTTOM LEFT */
outline:none;
-webkit-appearance: none; /* this removed the default styling */
}
index.html
<input type="text" class="search" value="search"> <!-- I've given the text box a value (search) so that you can test your css edits quickly without having to type in a value every time you refresh the page -->
I think that this answers your question. Get back to me in the comments if I can be of any further assistance.
Here is a link to jsfiddle where you can do a little rapid prototyping of my example.
http://jsfiddle.net/mstnorris/nVDbA/