PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > :placeholder-shown和:not()

:placeholder-shown和:not()

有什么是忘不了的的博客
有什么是忘不了的的博客 原创
2018年12月25日 14:25:18 1495浏览

今天看了一篇张大神的文章点这里

placeholder-shown伪类实现Material Design占位符交互效果。

我自己看了一遍做的个人理解,以便日后查看。

前后效果图。

1545717884(1).jpg

1545717894(1).jpg

主要就是把input的placeholder颜色设置为通明色。

在用定位吧“邮箱”定位到input里面。然后当input获得焦点时再对“邮箱”重定位。

<div class="input-fill-x">

    <input class="input-fill" placeholder="邮箱">

    <label class="input-label">邮箱</label>

</div>

.input-fill:placeholder-shown::placeholder {

    color: transparent;   //颜色设置为通明色

}

.input-fill {

    height: 40px;

     transition: border-color .25s;

}

.input-fill-x {

    position: relative;

}

.input-label {

    position: absolute;

    left: 16px; top: 12px;

    color: #ddd;

    pointer-events: none;

     transition: all .25s;

}

.input-fill:not(:placeholder-shown) ~ .input-label,

.input-fill:focus ~ .input-label {

    transform: scale(0.75) translate(0, -28px);

    background: #fff;

    color: #2486ff;

}


:not(); 意思就是不对某一个元素上样式。如:

     <h3>123</h3>

     <h3 class="h3">456</h3>

h3:not(.h3){

color: #ddd;

}

效果:1545719000(1).jpg


上一条: 前端布局相关 下一条: 时间函数:mktime()
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议