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

Get Started
1

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

2

That dotted border is an essential accessibility feature, and disabling it would make your site much harder to use for anyone who uses a keyboard rather than a mouse to navigate around the page. If you remove the dotted border and don’t put any alternative kind of highlight on, they won’t know where the focus is, making it effectively unusable.

3

Thanks for the answer! However, I’d prefer to remove it.

4

How you remove it depends on what you intend to put there in its place.

Since those using it for tracking where they are on the page expect it to look like that you will need it to look at least somewhat similar so they can tell where they are.

If you don’t intend replacing it with anything then the best alternative is to remove the button completely - at least that way you will not end up discriminating against disabled people who need that focus marker to tell where they are on the page.

Try navigating the web for a while without touching your mouse and you will soon realise why that marker is there.

For those using Opera who have trouble seeing where the focus is there is an extension available that converts it to a blue outline that matches the way it is marked in Safari.

5

This will work tor IE8 and Firefox but as others have said it’s a very bad idea unless you add some other sort of visual clue on focus.


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

Thanks for the codes, but the problem remains the same in IE6 and Opera11:

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

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

7

Just because I can and just because no one in the other 10 forums you have asked this same question have solved it here’s a solution that works everywhere :slight_smile:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
input#send {
    width:100px;
    height:40px;
    padding:0;
    border:0;
    position:absolute;
    top:-10px;
    left:-10px;
}
.nofocus {
    width:80px;
    height:20px;
    border: 1px solid green;
    overflow:hidden;
    position:relative;
    display:block;
    margin:3px 0;
}
input#send:focus {background:#ccc;}
</style>
</head>
<body>
<form name="input" action="" method="post">
    <fieldset>
    <legend>Name Please</legend>
    <input type="text" name="user" id="name">
    <label for="name">: Name</label>
    <span class="nofocus">
    <input id="send" type="submit" value="Submit">
    </span>
    </fieldset>
</form>
</body>
</html>
8

No question remains unanswered while there are people like you on the Internet. Thanks so much! :slight_smile:

9

hi,
Why you want to remove it, I mean why it so necessary to remove inner border? are you working on some kind of project ?

10

Not really. It’s part of a simple form on my site. But the point is I believe beauty is more important than usability and I find the inner border unattractive.

11

Without wanting to get personal about this, that’s a ridiculous attitude to take. A website that people can’t easily use is worth nothing. If you want a beautiful picture to admire, get a painting and hang it on your wall. If you want website that people can use then sometimes you have to make small sacrifices in terms of the overall aesthetics. And I mean small. No-one, but no-one, is going to worry about that dotted border apart from you. No-one cares. That’s a fact of the web. People want a website that is usable, and looks reputable and aesthetically OK.

If you think that aesthetics are more important than usability then this will be signalled loud and clear to the people who are struggling to use your site, and they will stay away in their droves.

12

Not really. It’s part of a simple form on my site. But the point is I believe beauty is more important than usability and I find the inner border unattractive.

Easily done: instead of building a website, just throw up a picture of one.

13

You have a point, but I didn’t say beauty was the only thing that mattered – in general beauty is more important to me. However, as you said, there are cases that I should sacrifice one for the other.

P.S. I’m a novice in coding and even if I finally just leave the dotted line there, at least I learned many things from experts like you!
Thank you everyone, esp. Paul, who taught me something in CSS! :slight_smile:

14

That’s not completely true. The people who don’t have a mouse and who are using their keyboard to navigate the page need it to be there so they can tell what field they are currently interacting with. If it isn’t there then they will not know where they are in the page and will have no idea what field that will be receiving the next command from their keyboard. The will therefore not be able to tell when they should hit enter to submit the form and so will be unable to submit it.

It isn’t as if it were a purely cosmetic part of the page appearance - it is as essential for those using the keyboard as the mouse cursor is for those using the mouse.

Why not hide that ugly mouse cursor as well if you are trying to make the page look better.

15

Sorry, what I meant was that no-one other than the OP will be upset by the presence of the dotted border. People who navigate by the keyboard need it (or an alternative focus indicator), and people who use a mouse will almost certainly not even notice that it’s there, let alone think any less of the website for using standard interaction features.

16

It is not a wise thing. That dotted border has a precise meaning: it shows where the focus is. But if you insist…
Code:

<input id=“send” type=“submit” value=“Submit” onfocus=“this.blur()”>

17

That doesn’t work in Opera I’m afraid which was a pre-requisite in the Ops first post.:slight_smile:

The only full solution so far has been mine as shown above :slight_smile: All others on the web failed at some point.