仅使用css扩展输入框

Question

我正在尝试创建一个搜索输入框,在聚焦时向左扩展,就像谷歌的移动网站一样.我试图只使用css这样做.

未在Safari(mac/iOS)中聚焦时的搜索框.左边的白色空间是公司徽标.请注意,输入文本框和搜索按钮之间没有空格.输入框有position:absolute, left:120px, right:80px.

焦点时的搜索框.我将left输入框更改为0开input:focus.

没有关注Firefox的搜索框.冲突的绝对位置值会left:120px, right:80px导致Chrome/Firefox上的输入文本框和按钮之间出现空白.

我该怎么做才能使用css创建这样一个左扩展输入框,而不指定常量值width.

这是Codepen上的一个工作示例.

这是代码......

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>

Answer 1

我建议使用 CSS table，请参阅以下演示。注意，我<span>在每个周围添加了一个<input>，用于设置table-cell.

使用的好处table-cell是 - 我们可以将一个单元格设置为 100% 宽度（对于输入框），而另一个单元格将获得最小宽度以自动适应内部内容（对于按钮）。

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>

小提琴演示：http://jsfiddle.net/6mn6be2j/

编辑：更新了演示，包含徽标，calc()涉及 CSS。

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>

小提琴演示：http://jsfiddle.net/ergdc0r1/