我正在尝试创建一个搜索输入框,在聚焦时向左扩展,就像谷歌的移动网站一样.我试图只使用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 class="clearable" 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 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,#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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。