#1
  1. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    May 2004
    Location
    Waterloo, Ontario, Canada
    Posts
    608
    Rep Power
    0

    Safari input focus blue border


    heys all,

    so im trying to get rid of that input:focus blue 'border' or 'outline' that happens in safari browsers. determined that if you apply a opacity: 0.99 to only the safari browsers, then it won't do that.

    however, this is only a fix for safari MAC. any thoughts on safari PC?

    thanks.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,105
    Rep Power
    4306
    There's no need to use a hack.

    Just use this:
    Code:
    input[type=text]:focus,
    input[type=password]:focus {
      outline: 0 none;
    }
    Last edited by Kravvitz; September 27th, 2007 at 11:47 PM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    May 2004
    Location
    Waterloo, Ontario, Canada
    Posts
    608
    Rep Power
    0
    you = my hero.

    thank you sir.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,105
    Rep Power
    4306
    I just tested this in MacOS...

    It seems that setting the opacity to .99 causes the text to become invisible when an <input type="text"> gets focus in Safari 1.2 - 2.x.

    Setting the opacity only seems to work in Safari 3 (which is in beta testing currently). Therefore, as far as I can tell, there is no good way to do this in Safari 1.x or 2.x.
    Last edited by Kravvitz; September 27th, 2007 at 11:54 PM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo