SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    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. #3
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    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.
    Thanks for the answer! However, I'd prefer to remove it.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Rain Lover View Post
    However, I'd prefer to remove it.
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

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

  6. #6
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

    Code:
    input[type="submit"]:focus{outline:none}
    input[type="submit"]::-moz-focus-inner{border:none}
    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. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

    Code:
    <!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. #8
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

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

  9. #9
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ashley Wilis View Post
    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 ?
    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. #11
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Rain Lover View Post
    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.
    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. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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. #13
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    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.
    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!

  14. #14
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stevie D View Post
    No-one, but no-one, is going to worry about that dotted border apart from you.
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  15. #15
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by felgall View Post
    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.
    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. #16
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Ashley Wilis View Post
    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()">
    That doesn't work in Opera I'm afraid which was a pre-requisite in the Ops first post.

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •