homepage Welcome to WebmasterWorld Guest from 54.226.136.179
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?
Rain_Lover



 
Msg#: 4289093 posted 4:41 pm on Mar 29, 2011 (gmt 0)

Hi,

Here's a sample form:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<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}
</style>
</head>
<body>
<form name="input" action="" method="post">
<input type="text" name="user"> Name
<div><input id="send" type="submit" value="Submit"></div>
</form>
</body>
</html>


the submit button gets a dotted border inside when focused.

Many thanks for any help!
Rain Lover

 

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4289093 posted 1:22 am on Mar 30, 2011 (gmt 0)

outline:none

Might want to add

cursor:pointer

Rain_Lover



 
Msg#: 4289093 posted 8:45 am on Mar 30, 2011 (gmt 0)

I'm afraid that doesn't help.

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4289093 posted 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#: 4289093 posted 12:21 pm on Mar 30, 2011 (gmt 0)

It doesn't help either.

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4289093 posted 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#: 4289093 posted 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

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4289093 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4289093 posted 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