lundi 20 avril 2015

Expanding input box using only css

I am trying to create an search input box that expands to left when focussed, just like Google's mobile website. I am trying to do this using css only.

Search box when not focussed in Safari (mac/iOS). white-space at left is for company logo. Notice that there is no white space between input text box and search button. Input box has position:absolute, left:120px, right:80px.

Search box when not focussed on Safari

Search box when focussed. I change the left of input box to 0 on input:focus.

Search box upon focussing

Search box when not focussed on Firefox. Conflicting absolute position values left:120px, right:80px result in whitespace between input text box and button on Chrome/Firefox.

Search box when not focussed on Firefox

What can I do create such a left expanding input box using css only and without specifying constant value for width.

Here is a working sample on Codepen.

Here is the code...

html:

<header>
    <form method="get" action="/search">
        <input class="clearable" type="text" value="ipad"/>
        <input type="submit" value="Search"/>
    </form>
</header>

relevant css:

header {
  padding: 0;
}
input[type='text'] {
  left: 120px;
  position: absolute;
  right: 77px;
  top: 0;
  transition-duration: 100ms;
}
input[type='text']:focus {
  left: 0;
  transition-duration: 300ms;
}
input[type='submit'] {
  background: #1352ec;
  color: #fff;
  position: absolute;
  right: 0;
  top: 0;
  width: 80px;
}

Aucun commentaire:

Enregistrer un commentaire