In Opera the border on the input button disappears when the text field becomes active, how can I prevent it?

advertisements

I'm trying to style the submit button on the wordpress search widget, but Opera is giving me trouble.

I've set a 1px solid border on the button, and it appears fine until the text input is activated, then the border on the button seems to disappear (or becomes black, i can't tell).

This does not happen in firefox where the button appears the same even if the text field is activated.

This is the css i have now:

li.widget_search #searchform #searchsubmit
{
    height: 24px !important;
    border-color: #ff9900;
    border-width:1px;
    border-style: solid;
    background-color: #201300;
    font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    color: #FFB100;
    padding: 0px 3px 0px 3px;
    overflow: hidden;

}

li.widget_search #searchform #searchsubmit:active
{
    border: 0px;
}


This is an Opera issue. It always adds a black border if a border is specified on button focus, regardless of the settings of that border (color or style at least). All other browsers display a nice blue border here, inheriting all the settings from the normal button CSS rule.

You can prevent this on your own button by removing the border from the button:focus style.

Try...

a.button:active { border:0px; }