i am using a select tag and as per the property of a select tag it displays the border on the top, bottom, left and right. my question is using css how can these borders on all the 4 sides be removed. please provide the complete code to remove the borders displayed by the select tag using css. thanks in advance.
You'd do it with select { border: none; or border:0; } BUT this may not work cross-browser as browsers make the ultimate decision with forms ESP Safari for Mac and Opera.
Yes, its quite bugging. Just the other day we a made "special-design" form and it looked awful in safari because of focused field highlighting etc. Is there a way we can override this? Will reset.css work here?
I don't think the reset will do it. However, sometimes images on top or divs taking the place of other form elements help. The focussed field highlighting... do you mean like FF's outline on focus? Sometimes in my reset part of my CSS (the first couple of things I list) I have outline: none; if I think it'll look too ugly. Mostly it helps people know something's selected, so I've only cancelled the outline once. After zeroing out margins and padding, FireFox partially covers the text in Select drop-downs. Adding select {padding-right: 1px;} fixes it in FF, but Opera ignores the CSS entirely there. Not zeroing out the margins and padding on the forms lets Opera and Firefox keep their defaults... sometimes you can't add it back in.
Styling select/option elements is going to be next to impossible, so don't worry too much about it. Especially given that the OPTION element is CDATA, which means it can't even ACCEPT styling to begin with.
Though firefux will let you do so even if it violates the specification doing so. More standards compliant my ass.