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

**Rain Lover** · 03-29-2011, 05:01 PM

Hi,

Here's a sample form:

Code:

<!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

**azoomer** · 03-29-2011, 05:35 PM

you can try this

Code:

<!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}
input:focus {outline:none;}
</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>

**Rain Lover** · 03-29-2011, 05:47 PM

Originally Posted by azoomer

you can try this

Code:

<!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}
input:focus {outline:none;}
</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>

I'm afraid that doesn't work.

**azoomer** · 03-29-2011, 06:10 PM

It works for me in IE, opera, chrome and safari. To get rid of the dotted border in firefox too, I found this to be working.

Code:

input:focus {outline:none;}
input[type="submit"]::-moz-focus-inner { border: none;}

**Rain Lover** · 03-29-2011, 06:17 PM

Originally Posted by azoomer

It works for me in IE, opera, chrome and safari. To get rid of the dotted border in firefox too, I found this to be working.

Code:

input:focus {outline:none;}
input[type="submit"]::-moz-focus-inner { border: none;}

Please look at the screenshots:
http://rain-lover.webs.com/IE6.JPG http://rain-lover.webs.com/IE6.JPG

http://rain-lover.webs.com/Opera11.JPG

**azoomer** · 03-29-2011, 06:39 PM

Yes I see what you mean. Try this link and see if you get the same. It could be a cache that needs to be cleared

**Rain Lover** · 03-29-2011, 08:20 PM

Originally Posted by azoomer

Yes I see what you mean. Try this link and see if you get the same. It could be a cache that needs to be cleared

Yes: use the keyboard to focus on the submit button and you'll see it.

**azoomer** · 03-29-2011, 08:42 PM

Ok, then I'm out of ideas. ( btw I don't know how to focus with the keyboard). Maybe someone else has a solution ?

**Rain Lover** · 03-30-2011, 08:47 AM

Originally Posted by azoomer

btw I don't know how to focus with the keyboard.

Using the Tab key.

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

Thread Tools

Search Thread

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

Bookmarks

Bookmarks

Posting Permissions