Safari input border control

20070419408

Update: This has been getting a bit of traffic lately so it might be worth mentioning that this idea was developed for dealing with Safari 2. The current version of Safari, Safari 3, with the updated WebKit engine has much more support for styling form elements making this largely unneeded if progressive enhancement meets your requirements.

Safari, bless its attempts at keeping certain UI elements consistent for its users across the web, makes accomplishing certain design tasks near impossible. I’ve mentioned ways of controlling the appearance of a form submit button by using the button tag but that only covers one of many form elements Apple would prefer designers not mess with. Using javascript replacement techniques such as Niceforms takes care of selects, radios and checkboxes, but still leaves text inputs stuck with the default border for both the focus and blur states. In most cases I’d argue against changing the appearance of these items but sometimes you just really feel like you have to have that random, borderless search box just chilling under a photo in the left column of your blog.

Negative margins

Safari’s text input borders ignore CSS declarations like border: 1px solid #333; or border: none; so instead this technique hides the user agent borders and creates faux borders on a wrapper element. Yes, a wrapper. This will require the slightest bit of HTML cruft.

Start with the normal form mark-up and then wrap each text input you wish to control in a div or span or other HTML element you feel to be the least semantically intrusive. The width and height of the wrapper is set depending on the text size for the input. Its position is also set to relative as the input will be shifted inside of it. And of course, any border styles, or lack thereof, are also set on it.

Safari does respect padding on text inputs. The idea then is to position the input outside the the confines of its wrapper with negative top and left coordinates and use padding to keep the text centered within it. This gives the illusion that the styles applied to the wrapper border are actually those of the input. See the example with the top input using faux borders while the bottom one is only using CSS declarations directly on the input. View the source to see the relevant CSS.

Getting back focus

Since the input borders are hidden, they’re no longer available to signify the input has gained focus. Instead, it also needs to be faked on the wrapper using javascript. Since IE doesn’t take to the :focus pseudo selector in CSS, javascript would have been needed to achieve this cross browser anyway. The following JS is specific to the example, so modifications are likely needed along with your favorite onload handler to activate. Or JQuery it.


function addFocus() {
  if (!document.getElementsByTagName) return false;

  var inputs  = document.getElementsByTagName('input');

  if (inputs[0]) {
    for (var i = 0; i < inputs.length; i++){
      inputs[i].onfocus = function() { this.parentNode.className += " inputon"; }
      inputs[i].onblur   = function() { this.parentNode.className = this.parentNode.className.replace("inputon",""); }
    }
  }
}

Safari CSS hacks

Depending on a combination of the text size and padding around the border, the same CSS isn’t necessarily going to work for Firefox, IE and Safari. To combat this a CSS hack specific to Safari is needed. I used the psuedo :lang hack in combination with the classic * html for IE. A less valid but more succinct option is the Pound Safari Post Semicolon option.

Or, if the design ends up requiring a Safari hack anyway, another option is to direct the faux borders only at Safari and use the usual input CSS to control Firefox, IE and others. I’ve given all browsers the faux border for sake of example.

Now if only there was a way to fake text-transform: uppercase;.

Comments

  1. miklos 20080505

    http://www.osenoa.com/log/2008/03/how-to-remove-that-annoying-blue-border-from-input-boxes-in-safari.html

  2. Stefan 20090429

    You can you outline:none for safari to disable the highlight feature.

  3. Anonymous 20090601

    SAFARI 2 DOES *NOT* RESPECT PADDING.

  4. waytoocrowded 20090606

    Interesting. The machine running Safari 2 I tested on (and just retested) rendered the padding properly. Perhaps edge case of certain rule combinations triggers it or specific builds of Safari 2 render it while others do not? Thanks goodness Safari 3 (and now even 4) is more important than worrying about 2.

  5. Anonymous 20100913

    If you set the CSS property background: none; then you can do pretty much what you want. :)

  6. Renaud 20110215

    Just need to write this in the CSS actually:

    border:none;
    outline-width:0;

    And it’s done.;-)

  7. waytoocrowded 20110215

    This post was written in April 2007. This was intended as a hack for Safari 2 and has been unnecessary since Safari 3. The update at the top of the post was intended to clarify that but it seems most overlook that part.

  8. Bob 20120816

    This is my comment, Bob.


Skateboards and bikes are better at nights

Skateboards and bikes are better at nights. 0 comments.


Search WayTooCrowded
The Header Should Always Point Home