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

3 Views

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).

Read More

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;
}
Post Views: 3

Related posts

Leave a Reply

3 comments

  1. 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; }

  2. How about this:
    I think Mr. David Murdoch’s advice is the best for Opera ( here ). I’ve tried his approach in Opera and I succeeded basically doubling the input tags in this way:

    <input type="submit" value="Go" style="display:none;" id="WorkaroundForOperaInputFocusBorderBug" />
<input type="submit" value="Go" />

    This way the 1st element is hidden but it CATCHES the display focus Opera would give to the 2nd input element instead. LOVE IT!