Input field extension using only css

Question

I am trying to create a search input box that expands to the left when it is centered, just like the Google mobile website. I am trying to do this using only css .

Search field if it is not concentrated in Safari (mac / iOS). the white space on the left is the company logo. Note that there is no space between the input text box and the search button. The input field has position:absolute, left:120px, right:80px.

The search field is focused. I change the input field lefton 0to input:focus.

Search box if it is not focused on Firefox. Conflicting absolute position values left:120px, right:80pxlead to a space between the text input box and the button in Chrome / Firefox.

What can I create for this input field with open extension only with css and without specifying a constant value for width.

Here is a working example on Codepen .

Here is the code ...

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;
}

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

Run codeHide result

Answer 1

I suggest using CSS table, see the next demo. Notice, I added <span>around each <input>, that is, for customization table-cell.

The advantage of using it table-cellis that we can set the width of one cell to 100% (for the input window), and the other cell will get the minimum width so that it automatically matches the content (for the button).

form {
    display: table;
    width: 100%;
}
span {
    display: table-cell;
    text-align: right;
}
span:first-child {
    width: 100%;
}
input[type='text'] {
    box-sizing: border-box;
    -webkit-transition: width 1s;
    -moz-transition: width 1s;
    transition: width 1s;
    width: 50%;
    height: 30px;
}
input[type='text']:focus {
    width: 100%;
}
input[type='submit'] {
    background: #1352ec;
    background: -webkit-linear-gradient(top, #4685f9 0%, #1659e1 100%);
    background: -moz-linear-gradient(top, #4685f9 0%, #1659e1 100%);
    background: linear-gradient(top, #4685f9 0%, #1659e1 100%);
    color: #fff;
    border-radius: 0;
    border: 0;
    width: 80px;
    height: 30px;
}

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

Run codeHide result

: http://jsfiddle.net/6mn6be2j/

EDIT: , CSS calc().

body {
    padding: 0;
    margin: 0;
}
form {
    display: table;
    width: 100%;
}
h1 {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
}
span {
    display: table-cell;
    text-align: right;
}
span:first-child {
    width: 100%;
}
input[type='text'] {
    box-sizing: border-box;
    -webkit-transition: width 1s;
    -moz-transition: width 1s;
    transition: width 1s;
    width: calc(100% - 120px);
    height: 30px;
    position: relative;
    z-index: 1;
}
input[type='text']:focus {
    width: 100%;
}
input[type='submit'] {
    background: #1352ec;
    background: -webkit-linear-gradient(top, #4685f9 0%, #1659e1 100%);
    background: -moz-linear-gradient(top, #4685f9 0%, #1659e1 100%);
    background: linear-gradient(top, #4685f9 0%, #1659e1 100%);
    color: #fff;
    border-radius: 0;
    border: 0;
    width: 80px;
    height: 30px;
}

<header>
    <h1><img src="http://placehold.it/120x30"/></h1>
    <form method="get" action="/search">
        <span>
            <input class="clearable" type="text" value="ipad" name="q" autocomplete="off" />
        </span>
        <span>
            <input type="submit" value="Search" />
        </span>
    </form>
</header>

Hide result

: http://jsfiddle.net/ergdc0r1/

Answer 2

right left .

, .

- div .wrapper. 100%, - . .

- . CSS , . , . calc . , 110% .

.wrapper input:hover {
  width: calc( 100% + 30px );
}

Demo

.wrapper {
  position: absolute;
  right: 100px;
  left: 10px;
}
.wrapper input {
  background: green;
  width: 100%;
  transition: all 1000ms;
}
.wrapper input:focus {
  width: calc( 100% + 50px );
}

<div class="wrapper">
  <input>
</div>

Hide result

Answer 3

CSS

   header {
  height: 30px;
  line-height: 30px;
  padding: 0;
}
input[type='text'] {
  border-radius: 0;
  height: 24px;
  line-height: 24px;
  outline: none;
  position: absolute;
  right: 80px;
  top: 0;
  -webkit-transition: width 10s ease;  
    -moz-transition: width 10s ease;  
    -o-transition: width 10s ease;  
    -ms-transition: width 10s ease;  
    transition: width 10s ease;  
  width:200px;
}
input[type='text']:focus {
  width:1000px;

}
input[type='submit'] {
  background: #1352ec;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4685f9), color-stop(100%, #1659e1));
  background: -webkit-linear-gradient(top, #4685f9 0%, #1659e1 100%);
  background: -moz-linear-gradient(top, #4685f9 0%, #1659e1 100%);
  background: -o-linear-gradient(top, #4685f9 0%, #1659e1 100%);
  border: 0;
  border-radius: 0;
  color: #fff;
  height: 30px;
  line-height: 30px;
  position: absolute;
  right: 0;
  top: 0;
  width: 80px;
}

DEMO

, , .

, ,

• Left ,
• Left right , , , right .
• width