PDA

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



Rain Lover
03-29-2011, 06:01 PM
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

azoomer
03-29-2011, 06:35 PM
you can try this


<!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, 06:47 PM
you can try this


<!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, 07: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.


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

Rain Lover
03-29-2011, 07:17 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.


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

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

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

azoomer
03-29-2011, 07:39 PM
Yes I see what you mean. Try this link (http://azoomer.com/submit.html) and see if you get the same. It could be a cache that needs to be cleared

Rain Lover
03-29-2011, 09:20 PM
Yes I see what you mean. Try this link (http://azoomer.com/submit.html) 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, 09: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, 09:47 AM
btw I don't know how to focus with the keyboard.

Using the Tab key.