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.
See a working example of the inline search box.
Inline search box that looks and works fine in all major browsers.
<form action="#" method="get" >
<input type="text" name="q" value="Search for..."/>
padding:1px 5px 1px 3px;
border:3px solid #ebebeb;
border-color:transparent; /*Fix IE*/
background:#5AB300 url(button_search.png) left center no-repeat;
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.
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
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:
Focus state workaround
Here’s a quick jQuery workaround for the above example:
And the required CSS:
border-color:#09c; /* a blue border color */
outline:none; /* cancel the browser's default input outline */
Alternative for the browser’s default focused state by using a modifier CSS class
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.
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.
Filed under: CSS, Front-end, How to, HTML