rocknbil
msg:4289323 | 1:22 am on Mar 30, 2011 (gmt 0) |
outline:none
Might want to add
cursor:pointer
|
Rain_Lover
msg:4289407 | 8:45 am on Mar 30, 2011 (gmt 0) |
I'm afraid that doesn't help.
|
alt131
msg:4289436 | 10:41 am on Mar 30, 2011 (gmt 0) |
Hi rainlover, how odd - like rocknbil I would expect outline:none to work, but it only works in ie.
The best I could come up with was
input#send:focus {outline:1px solid #D4D0C8;}
where the colour is the colour of the input. (Transparent was my first choice, but didn't work either.) Worked in the latest ff3, winsafari5, Op10, ie8.
|
Rain_Lover
msg:4289468 | 12:21 pm on Mar 30, 2011 (gmt 0) |
It doesn't help either.
|
alt131
msg:4289481 | 1:27 pm on Mar 30, 2011 (gmt 0) |
It would be helpful if you explained what "doesn't help" means
I've just double checked and both outline:none and outline:1px solid #D4D0C8; work in winsafari3-5, op7-10, ie8
That means they both "help" in the major browsers on a pc.
Now I've zoomed firefox3 even higher I can see it is still being applied: For that ::-moz-focus-inner { border: 0; } removes the outline, but is not valid - and wasn't one of the browsers you specified anyway.
|
Rain_Lover
msg:4289551 | 4:02 pm on Mar 30, 2011 (gmt 0) |
The problem remains the same in IE6 (an old browser) and Opera11 (a modern browser). Please look at the screenshots:
[rain-lover.webs.com ]
[rain-lover.webs.com ]
To reproduce the problem please focus on the submit button using the Tab key.
|
rocknbil
msg:4289578 | 4:26 pm on Mar 30, 2011 (gmt 0) |
Well, I've never given it much attention because that dotted line is an accessibility tool, taking it away because it disturbs the design is unwise, to say the least. This will do it in FireFox,
input[type="submit"]::-moz-focus-inner { border:none; outline:none; }
but can't help with other browsers.
If you google this one you'll see it's long been battled and generally posts and articles arrive at the same conclusion.
|
alt131
msg:4293049 | 11:11 am on Apr 6, 2011 (gmt 0) |
This may be a bit late now, but this issue was interesting.
@rocknbil, second your comment about this being an important accessibility tool, and thanks for posting border:none (border:0 = too much late-night coding ;) )
@Rain_Lover, it isn't posible to apply focus to a submit button on a screen image, which is why we prefer code, also because this could have been a selector issue rather than a declaration issue. However, now you've specified the browsers, easy to identify the issues:
The above solutions do not work in Opera11, which needs the outline to be "shifted" using an offset - something like {outline-offset:-2px}.
ie6 does not understand outline, so none of the provided solutions will work. A search on "cssplay remove focus" will bring up solutions by Stu Nichols that may provide clues, but note that none of the examples are form elements.
|
|
