PROMULGATOR

    Kiss_karen

    云南省玉溪市
    Html
    Css
    Js
1
<div id="userName" class="input" aria-placeholder="请输入"><input type="text"></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.input input {
    /* height:30px;
    float:left;
    */
    outline:none;
    width:120px;
    border:none;
    background:none;
    border-bottom:.1rem solid rgb(0,153,254);
    color:rgba(0,153,204,0.84);
    font-size:1rem;
}
.input::after {
    content:attr(aria-placeholder);
    position:absolute;
    left:0;
    top:-20%;
    font-size:1.1rem;
    color:rgba(0,153,204,0.66);
    transition:.3s;
}
.input.focus::after {
    top:-70%;
    font-size:1rem;
}
.input {
    position:relative;
    opacity:1;
    width:100%;
    margin:2rem 0 0;
    height:42px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
$('.input input').on('focus', function() {
    $(this).parent().addClass('focus');
})
$('.input input').on('blur', function() {
    if ($(this).val() === '')
        $(this).parent().removeClass('focus');
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

简洁过渡输入框

更新时间：2020-09-08 00:41:47

在谷歌浏览器下 点击提示文字和横线都会使得文字上升，但在其他浏览器仅点击横线时提示文字会上升，浏览器兼容问题尚未解决，望指教。

0