How do I style text fields in Safari and Chrome

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 */
}