Form Focus Border

@robindeanJun 02.2007

Is there a relatively universal method for removing the onFocus border from around forms such as input boxes, submit buttons and drop-down menus?

(yes, I know about the accessibility issues)

to post a comment

JavaScript

@FangJun 03.2007 — #outline

@robindeanauthorJun 03.2007 — #Thanks Fang.

I've never really used this style attribute before and am having some difficulty.

A while back I had found this code ...

[CODE]:focus {
-moz-outline-style: none;

}[/CODE]

... but I'm still seeing an obvious focus border in forms with Safari/Mac. Netscape is showing forms with a dotted line focus. IE doesn't seem to be doing anything but I'm unsure as to the behavior there.

If I need multiple methods/ingredients that's fine but my hope is to remove any focus border from all forms, including drop down menus.

If you or anyone else knows of the combined code which can accomplish this, I'd love to have it.

Below is my form related css.

[CODE]form {
 margin: 0px;
 }
 #cd, #mp3, #sm {
 width: 100%;
 font-size: 12px;
 font-family: verdana, arial, helvetica;
 font-weight: bold;
 background-color: #00bb00;
 }
 #email {
 width: 65%;
 float: left;
 font-size: 12px;
 font-family: verdana, arial, helvetica;
 font-weight: bold;
 background-color: #ddaa33;
 }
 #submit {
 width: 30%;
 float: right;
 font-size: 12px;
 font-family: verdana, arial, helvetica;
 font-weight: bold;
 background-color: #ddaa33;
 }
 #nj, #sd, #lb {
 width: 100%;
 font-size: 12px;
 font-family: verdana, arial, helvetica;
 font-weight: bold;
 background-color: #ddaa33;
 }[/CODE]

@FangJun 03.2007 — #Try using [I]onfocus="this.blur();"[/I] on all form elements except text controls.

@robindeanauthorJun 03.2007 — #I tried that a while back and it rendered the forms unusable, namely by blurring what was being focused (removing the active state every time I try to activate).

I've seen this.hidefocus(); or is it hidefocus = true; ?

Either way, Safari doesn't seem to like it.

I'm willing to do a three-fold combo. Stylesheet for NS, hidefocus for IE ... but what about Safari?

@FangJun 03.2007 — #IE onlyobj.hideFocus=true;

Form Focus Border

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Form Focus Border

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴