使用bootstrap实现的可水平扩展搜索输入框

没有输入时，缩为一个圆形。点击输入时，自动延伸为一个文本输入框。

input,box,search

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 6459
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    margin: 5%;
}
.search-box {
    -webkit-transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s;
    transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    background: #ebebeb;
}
.search-box + label .search-icon {
    color: black;
}
.search-box:hover {
    color: white;
    background: #c8c8c8;
    box-shadow: 0 0 0 5px #3d4752;
}
.search-box:hover + label .search-icon {
    color: white;
}
.search-box:focus {
    -webkit-transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s;
    transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s;
    border: none;
    outline: none;
    box-shadow: none;
    padding-left: 15px;
    cursor: text;
    width: 300px;
    border-radius: auto;
    background: #ebebeb;
    color: black;
}
.search-box:focus + label .search-icon {
    color: black;
}
.search-box:not(:focus) {
    text-indent: -5000px;
}
#search-submit {
    position: relative;
    left: -5000px;
}
.search-icon {
    position: relative;
    left: -30px;
    color: white;
    cursor: pointer;
}

HTML

没有输入时，缩为一个圆形。点击输入时，自动延伸为一个文本输入框。

input,box,search

编辑器支持Emmet

快捷键

没有输入时，缩为一个圆形。点击输入时，自动延伸为一个文本输入框。

input,box,search

使用-webkit-box-reflect实现的带倒影特效的图文卡片

使用CSS3弹性框布局flex-grow方法实现列宽弹性伸展动画效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：