html – 仅使用css扩展输入框

发布时间:2020-08-11 整理:编程之家
编程之家收集整理的这篇文章主要介绍了html – 仅使用css扩展输入框编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随编程之家小编过来看看吧!
我正在尝试创建一个搜索输入框,在聚焦时向左扩展,就像谷歌的移动网站一样.我试图只使用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>

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

总结

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

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!