CODEWITHSUNDEEP
htmlcsswordpressopera
Kanonskall
Kanonskall

Reputation: 423

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

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

Upvotes: 3

Views: 1866

Answers (3)

Mori
Mori

Reputation: 6890

Use a button element instead of an input, e.g.

<button type="submit">Submit</button>

and you won't see the black border in Opera.

Upvotes: 0

Tyler
Tyler

Reputation: 349

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!

Upvotes: 0

Liam
Liam

Reputation: 9855

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

Upvotes: 1

Related Questions