html – 仅使用css扩展输入框

概述我正在尝试创建一个搜索输入框,在聚焦时向左扩展,就像谷歌的移动网站一样.我试图只使用css这样做. 未在Safari(mac / iOS)中聚焦时的搜索框.左边的白色空间是公司徽标.请注意,输入文本框和搜索按钮之间没有空格. 输入框的位置为：绝对,左：120px,右：80px. 焦点时的搜索框.我在输入时将输入框的左侧更改为0：焦点. 没有关注Firefox的搜索框.剩余的绝对位置值冲突：120p 我正在尝试创建一个搜索输入框,在聚焦时向左扩展,就像谷歌的移动网站一样.我试图只使用CSS这样做.

未在Safari(mac / iOS)中聚焦时的搜索框.左边的白色空间是公司徽标.请注意,输入文本框和搜索按钮之间没有空格.
输入框的位置为：绝对,左：120px,右：80px.

焦点时的搜索框.我在输入时将输入框的左侧更改为0：焦点.

没有关注firefox的搜索框.剩余的绝对位置值冲突：120px,右：80px导致输入文本框和Chrome / firefox上的按钮之间出现空白.

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

这是一个working sample on 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  type="text" value="ipad"/>        <input type="submit" value="Search"/>    </form></header>

解决方法 我建议使用CSS表,请参阅以下演示.请注意,我添加了< span>围绕每个< input>,用于设置表格单元格.

使用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,#1659e1 100%);    background: linear-gradIEnt(top,#1659e1 100%);    color: #fff;    border-radius: 0;    border: 0;    wIDth: 80px;    height: 30px;}

<header>    <form method="get" action="/search">        <span><input  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,#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  type="text" value="ipad" name="q" autocomplete="off" />        </span>        <span>            <input type="submit" value="Search" />        </span>    </form></header>

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

总结

以上是内存溢出为你收集整理的html – 仅使用css扩展输入框全部内容，希望文章能够帮你解决html – 仅使用css扩展输入框所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。