动态改变尺寸的输入框

可以根据输入内容动态改变输入框大小

CSS3

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* README
Must be positioned absolutely, as far as I know.

Currently has a hard stop on the left side.
To make it right, simply change left:40% to right:40%.
*/
/* Style stuff */

* {
    font-family: Helvetica, Arial;
    font-size: 48px;
    color: rgba(255, 255, 255, 1);
    background-color: #222;
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
}
/* Actual input text */

form {
    min-width: 50px;
    text-align: left;
    left: 34%;
    top: 40%;
    position: fixed;
    background-color: transparent;
    transition: all 0.1s ease-in-out
}
span {
    text-align: left;
    border: bottom;
    outline: none;
    border-radius: 0;
    background-color: transparent;
    box-sizing: border-box;
    border: 2px dashed rgba(255, 255, 255, 0);
    cursor: text;
    transition: all 0.1s ease-in-out;
}
/*Begin animation stuff*/
/*Note the transitions in form{} and span{}*/

span:focus ~ label {
    color: #444;
    font-size: 16px;
}
.bar:before,
.bar:after {
    width: 0;
    content: "";
    height: 2px;
    position: absolute;
    background: #999;
    transition: all 0.2s ease-in-out;
}
.bar:before {
    left: 50%;
}
.bar:after {
    right: 50%;
}
span:focus ~ .bar:before,
span:focus ~ .bar:after {
    width: 50%;
}

HTML

可以根据输入内容动态改变输入框大小

CSS3

编辑器支持Emmet

快捷键

可以根据输入内容动态改变输入框大小

CSS3

可动态改变尺寸的球形运动动画

使用CSS3 placeholder-shown过滤器（选择器）实现的浮动输入框标签

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：