Welcome to WebmasterWorld Guest from 54.163.84.199

Forum Moderators: not2easy

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

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

5+ Year Member Top Contributors Of The Month



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
1:22 am on Mar 30, 2011 (gmt 0)

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



outline:none

Might want to add

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

5+ Year Member Top Contributors Of The Month



I'm afraid that doesn't help.
10:41 am on Mar 30, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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)

5+ Year Member Top Contributors Of The Month



It doesn't help either.
1:27 pm on Mar 30, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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)

5+ Year Member Top Contributors Of The Month



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)

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



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)

WebmasterWorld Senior Member 5+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month