Opera's hideous yellow border

[MrBarefoot]

I have searched every place I can think of for an answer to this one…Why does Opera put that hideous yellow border around the input “pword” and not “pword2”?<tr><td><b>Password:</b><br><input name="pword" type="password" size="30" maxlength="30" value="<%= session("pword")%>"></td><td><b>Verify Password:</b><br><input name="pword2" type="password" size="30" maxlength="30" value="<%= session("pword2")%>"></td></tr>Why does Opera put that hideous yellow border around the select box “mMonth” and not “bMonth”?<select name="mMonth" id="mMonth" onchange="calc()" style="font-size:10"> <option value="01" <% if session("mMonth") = "01" then Response.Write " SELECTED " end if %>>January</option> <option value="02" <% if session("mMonth") = "02" then Response.Write " SELECTED " end if %>>February</option> <option value="03" <% if session("mMonth") = "03" then Response.Write " SELECTED " end if %>>March</option>…etc…</select><select name="bMonth" id="bMonth" onchange="calc2()" style="font-size:12"><option value="01" <% if session("bMonth") = "01" then Response.Write " SELECTED " end if %>>January</option><option value="02" <% if session("bMonth") = "02" then Response.Write " SELECTED " end if %>>February</option><option value="03" <% if session("bMonth") = "03" then Response.Write " SELECTED " end if %>>March</option>…etc…</select>And how do I get rid of it altogether?Thanks all

[jeffman]

If you experiment, you'll see that the element with the focus has the ring. (Color varies with system defaults or other settings, BTW.)In Safari, you get rid of it like this:input:focus {outline: none;}Doesn't work in Opera. Here's something that does:You can get rid of the focus ring on your text inputs by assigning them almost any style information that would affect appearance. The easiest thing is to set the background color to the color of whatever it's defaulting to now, like white.My attempts to accomplish the same with select elements is disappointing, because changing just about any property that affects appearance transforms the element from the current System UI into an ugly thing from days of systems past.2 things to consider.1. Opera has trivial market share. You could easily ignore it.2. Users get accustomed to a certain interface. They may even have chosen Opera because the UI does exactly what they want. Focus rings and such aid some people with accessibility issues. A common philosophy is to assume the user wants it this way for a good reason.

[MrBarefoot]

If you experiment, you'll see that the element with the focus has the ring. (Color varies with system defaults or other settings, BTW.)

Thanks Deirdre's Dad, but I don't think the focus is the issue. On my form, the username and password text boxes have the yellow border, but the rest of the inputs do not. Also, the select boxes for Month, Day, and year have no outline in the main form, but they do in another "included" form on the page. So in all, 8 out of 30 form elements have the outline. I can style the elements all I want, but that outline/border is still there... And only in Opera.I am tempted to post a disclaimer for all the Opera fans out there. lolBTW. When I click in any of the inputs to give focus, the outline doesn't appear.

[MrBarefoot]

How bizarre! If I change the input Name tags from uname to usname, and pword to psword, the borders go away. This worked for the log in page as well…It fixed 2 of the 8 fields. lolUpdate: Changing the elements' Names got rid of the borders, however, a few clicks and refreshes, and they are all back. I am beginning to get a bit miffed!

[Fmdpa]

1. Opera has trivial market share. You could easily ignore it.

Hey, I like Opera! But I would skip worrying about the border anyway, not because of Opera's market share, but because of DD's second point:

2. Users get accustomed to a certain interface.

I notice that my inputs don't have the yellow border. I'm not sure why, but now that I think of it all of my inputs have a bg-color/border-color other than the default. P.S. 2% of all internet users is still a significant number, so I wouldn't say it is fair to ignore them!

[MrBarefoot]

Hey, I like Opera! But I would skip worrying about the border anyway, not because of Opera's market share, but because of DD's second point:I notice that my inputs don't have the yellow border. I'm not sure why, but now that I think of it all of my inputs have a bg-color/border-color other than the default. P.S. 2% of all internet users is still a significant number, so I wouldn't say it is fair to ignore them!

Thanks Fmdpa It is a strange quirk. There seems to be no pattern to it. I have played with styling the individual elements, using javascript to play with it, external stylesheets, bg-color, bg-images, borders, margins, outlines, padding..... nothing seems to be connected to the problem. No commonality at all to which element gets the outline and which does not. Except that when I changed the element Name, the outline briefly went away. I'm stumped. I agree with you and DD, but I am a perfectionist, and Opera has a worthy fan base, so I would like to figure this out, at least so I can sleep at night. lol

[lastlifelost]

The yellow borders denote autofill fields, areas that Opera can fill in using the masterkey function. Changing the name of the field may temporarily remove these borders until Opera figures out the new input fields to highlight. AFAIK, there is no way to disable this as it's an inherent trait of the browser and, as 'Dad pointed out, a feature that many Opera users want and expect.

[MrBarefoot]

The yellow borders denote autofill fields, areas that Opera can fill in using the masterkey function. Changing the name of the field may temporarily remove these borders until Opera figures out the new input fields to highlight. AFAIK, there is no way to disable this as it's an inherent trait of the browser and, as 'Dad pointed out, a feature that many Opera users want and expect.

Thank You lastlifelost. That makes perfect sense now. This is why I could find no commonality in my coding."Cross-Browser" should be a dirty word.

[lastlifelost]

..."Cross-Browser" should be a dirty word.

It is, just generally regarding IE. I have such high hopes for IE9, though...

[jeffman]

I should have been more clear what I meant about the size of Opera's user base. I was thinking only of the context. If HTML does not render as expected, or if JavaScript isn't functioning, and you track the problem to Opera only, of course you must consider the 2% or whatever. I assumed that went without saying.Trying to subvert features of a browser that its designers put a lot of thought into is a different case. The fact that a page developer's aesthetics don't match the browser designers' aesthetics is not automatic cause for alarm. From time to time a feature may interfere with a legitimate design feature, as when the resizable property of a testarea could cause gross distortion and rearrangement of other features. In such a case, there is usually a way to turn off the default behavior.It seems reasonable to me that if you're customizing a browser experience in a way that is essentially aesthetic, but a browser's idiosyncratic, built-in features get in the way of that experience, AND there is no obvious way to defeat the feature, you might think twice about compatibility with that browser. If the browser has a small user base, that makes the argument even stronger.A decent analogy. IE6, also with a small user base, does not natively accommodate the alpha property of .png images. This isn't even intentional in any meaningful way. png's were not widely used when IE6 was deployed. JavaScript hacks can make IE6 behave properly. But many designers choose the ignore the issue altogether, so some of their images kook jaggy in IE6. I do not consider this unreasonable. YMMV.

[Fmdpa]

I loath IE6. And, according to W3schools stats, it has around 6% market share. This is more than Opera, but I choose to support Opera (and not IE6) with my code because IE6 should be dead and I'm not going to make people feel comfortable in it. Opera complies to the web standards better than most browsers, so I can remember very few bugs I've run into with it. None of the inputs on my site are yellow bordered in Opera (even the password inputs). ALL of the input on my site have a custom border color/style/width and background. That seems like a pattern to me. MrBarefoot, have you tried applying a custom styles to the textbox?

input[type=password] {   border:1px inset #d1d1d1;   background:#fff;}

[jeffman]

Supporting Opera is not a big deal, just like supporting Webkit browsers is not a big deal, because I develop first for Firefox. All these guys mostly play by the rules, and results are VERY consistent. Very little tweaking.

[MrBarefoot]

Thanks for all the responses everyone.Fmdpa; Yes, I have played with styling the individual elements, using javascript to play with it, external stylesheets, bg-color, bg-images, borders, margins, outlines, padding.....I don't see the border on other sites with autofill fields, and it doesn't occur on every autofill field on my site. How would the "masterkey function" affect select boxes? And, why one select box and not another when the only difference between the two is the Name tag?It still doesn't make sense.

[Fmdpa]

If this is bothering you enough, you might consider contacting Opera (if it is possible).