Bitesize Bugs

Building an inline search box

This article provides a workaround for Internet Explorer’s bug when handling padding-right on text input elements.

The problem is clearly visible when building a particular search box design, with the search button included in the search field. Internet Explorer will allow long search queries to slide under the search button.

A feasible workaround for IE’s padding problem is to wrap the search button and the input field in a container that you can style to look like an input.

Example

See a working example of the inline search box.

Inline search box that looks and works fine in all major browsers.

Inline search box that looks and works fine in all major browsers.

HTML Markup

<form action="#" method="get" >
  <input type="text" name="q" value="Search for..."/>
  <button type="submit">Search</button>
</form>

CSS

form{
  padding:1px 5px 1px 3px;
  border:3px solid #ebebeb;
  ...
}

input{
  border:none;
  border-color:transparent; /*Fix IE*/
  ...
}

button{
  width:16px;
  height:16px;
  outline:none;
  border:none;
  background:#5AB300 url(button_search.png) left center no-repeat;
  text-indent:-999px;
  ...
}

Removing the input border

Using the border: none property will remove the input’s border from most browsers but not for Internet Explorer. In order to fix IE’s input border you need to also add border-color: transparent. More about this issue on IE’s buggy border property in this article.

The search button

The search button is placed inline with the input element but inside the container that looks like an input. There is a reason for this placement instead of assigning a negative left margin to the button. In Internet Explorer the input will not apply padding-right correctly so the input’s text value will slide under the button for long strings.

I wrote more about this problem in an article about IE’s problem with right padding on input elements.

Accessibility

When you disguise the input by removing its border the element will still show its true dimensions when in focused state. This is caused by the outline property you can set with CSS. The outline on input elements is very prominent in Safari as a bright blue halo around the editable content area.

Focused input on safari shows a bright blue halo

Focused input on Safari shows a bright blue halo

Due to accessibility concerns my suggestion is that you don’t remove the outline from the input. Users used with Safari will understand that they’re actually typing in an input there.

If, however, there are other concerns that prevent you from using Safari’s blue halo you can disable it by using:

input{
  outline:none;
}

Focus state workaround

When disabling the browser’s default focus style on input elements I strongly suggest that you at least offer an alternative. You can do so with JavaScript by assigning a modifier class name on the container that would change its border or background color when the input is focused.

Here’s a quick jQuery workaround for the above example:

$('input')
  .bind('focus', function(){
    $(this).parents('form').addClass('focus');
  })
  .bind('blur', function(){
    $(this).parents('form').removeClass('focus');
  })

And the required CSS:

.focus{
  border-color:#09c; /* a blue border color */
}

.focus input{
  outline:none; /* cancel the browser's default input outline */
}
Alternative for the browser’s default focused state by using a modifier CSS class

Alternative for the browser’s default focused state by using a modifier CSS class

Hidden text

Another accessibility concern you should have is the search button's text value. I used an image background for the button and hid the text. You might think I could have used an input type="image" or I could have just let the button tag empty, but I didn't.

I chose to hide the text off-screen, but leave it contextually in the page structure, because a screen reader would actually interpret that text to a visually impaired user.

button{
  text-indent:-999px;
  ...
}

This is also useful in an environment with little or no CSS support because it will keep the search box usable by replacing the arrow I used with a valid control.

About these ads

Filed under: CSS, Front-end, How to, HTML

One Response

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: