SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    PHP Otaku Gibb's Avatar
    Join Date
    Jul 2004
    Location
    Texas
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Quick question, removing dotted line on a css button

    howdy all,

    I have a site where i've made a bunch of CSS buttons. I also use javascript focus() calls to set various links on the site as the logical next step for the customer to do so the Enter key can be pressed. (such as login.php being the highlighted link when you first come to the site). The CSS buttons i set to my default link have a little dotted line rectangle on them, and i'm sure there's a CSS line to get rid of that.

    TIA,
    -Gibb

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Some people would say that it,s not advisable to get rid of the dotted line as keyboard users will be unable to navigate your site without it. (Other people may say differently of course )

    However if you don't mind that then have a look in this thread for some js examples.

    http://www.sitepoint.com/forums/show...threadid=10142

    http://www.sitepoint.com/forums/show...threadid=74656

    Paul

  3. #3
    PHP Otaku Gibb's Avatar
    Join Date
    Jul 2004
    Location
    Texas
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmmm

    My buttons have a blue background when inactive, and a yellow background when hovered. I suppose if i wanted to have the :hover functionality instead of the dotted line, i would need more javascript?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Not sure what you are saying exactly. You just set the hover with a:hover {background:yellow} but this won't cover up the focus dotted border. You need the js to remove the dotted border.

    If you remove the dotted border then you could colour the active state for keyboard users.
    e.g.
    Code:
    a:focus {background:red}
    a:active {background:red}
    Paul


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
  •