homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

How to get rid of the submit button inner border in IE & Opera?

 4:41 pm on Mar 29, 2011 (gmt 0)


Here's a sample form:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sample Form</title>
<style type="text/css">
input#send {width:80px; height:20px; padding:0; border:0;}
div {width:80px; height:20px; border: 1px solid green}
<form name="input" action="" method="post">
<input type="text" name="user"> Name
<div><input id="send" type="submit" value="Submit"></div>

the submit button gets a dotted border inside when focused.

Many thanks for any help!
Rain Lover



 1:22 am on Mar 30, 2011 (gmt 0)


Might want to add



 8:45 am on Mar 30, 2011 (gmt 0)

I'm afraid that doesn't help.


 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.


 12:21 pm on Mar 30, 2011 (gmt 0)

It doesn't help either.


 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.


 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.


 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.


 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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved