仅使用css扩展输入框

Question

我正在尝试创建一个搜索输入框，在聚焦时向左扩展，就像谷歌的移动网站一样。我正在尝试仅使用css执行此操作。

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

焦点时的搜索框。我将left输入框的0更改为input:focus上的left:120px, right:80px。

不专注于Firefox时的搜索框。绝对位置值冲突width会导致Chrome / Firefox上的输入文本框和按钮之间出现空格。

我该怎么做才能使用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; }的常量值。

这是 working sample on Codepen 。

这是代码......

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

{{1}}

Answer 1

在大多数浏览器中，通过right和left设置输入的宽度似乎有点问题。

为了完成这项工作，我们需要使用几个可怕的黑客。

第一个hack是将输入包装在.wrapper div中。然后输入的宽度为100％，包装给出绝对定位和左右值。这将根据您的问题使输入的初始大小正确。

第二个黑客是在我们：聚焦输入的时候。 CSS（还）不允许我们根据孩子是否专注来设置包装器的样式。为了解决这个问题，我们可以定位子输入并使其有意溢出包装器。 calc这里允许我们指定溢出的确切数量。如果这不适用于您的浏览器，那么在这里使用110%也应该没问题。

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

演示

.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>

Answer 2

我建议使用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/

编辑更新了包含徽标的演示，参与了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>

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

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

  

我希望这就是你想要的。

你做错的事是

1. Left属性只会帮助您移动框，但不会展开框
2. left和right两个属性都在您的文本框中使用，因此它在搜索按钮和文本框之间创建了一个空格，任何一个都应该用于将其放置在正确的位置和您的案例right属性更适合。
3. 使用width属性
增加文本框的大小