Rob Murrer

Sliding Door Inputs

Forms look different on every browser & operating system. To make a form input appear exactly the same across browsers, everything rendered by default by browser must be replaced. This example takes the common sliding doors technique and applies it to an input widget. This enables us to add a rounded border to the input.

HTML
1
2
3
4
5
6
7

<form class="sliding">
  <fieldset><legend>Sliding door inputs</legend>
    <ul>
      <li><label>One</label><span></span><input type="text"></li>
    </ul>
  </fieldset>
</form>
CSS
1
2
3
4

.sliding label   { float:left; width: 75px; height:21px; }
.sliding input   { float:left; width: 150px; height:21px; font-size:14px; padding-top:3px; border:0;                 outline:0; background: #FFF url('images/sliding-input.png') no-repeat top right; }
.sliding span    { float:left; height: 21px; width: 5px;
                   background: #FFF url('images/sliding-input.png') no-repeat top left;}

Rendering