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?

Solution

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

Comments

[tw16]

@mike: Please do not make substantial edits to my answer. If you have a suggestion you can put it in the comments.

[Michael]

The edit I made to your post is very similar to the edit you then made yourself. I shall also point out that I also added comments to your code which is good practice. Your answer was good but it was not complete. You are missing a few things (I added them in my edit but you have since removed them again). This site is all about collaboration, see here, stackoverflow.com/faq#editing of which I shall cite the entry "If you are not comfortable with the idea of your contributions being collaboratively edited by other trusted users, this may not be the site for you."