一些新的伪选择器

作为一些还未被浏览器完全支持的伪选择器，作为渐进增强还是不错的。

 

placeholder-show：placeholder显示出来的时候

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>placeholder-shown</title>
    <style>
        form{
            position: relative;
            padding-top: 30px;
        }
        label{
            position: absolute;
            top: 0;
            left: 0;
            font-size: var(--font-size-small);
            opacity: 1;
            transform: translateY(0);
            transition: .2s;
        }
        input:placeholder-shown + label{
            opacity: 0;
            transform: translateY(1em);
        }
    </style>
</head>
<body>
    <form action="">
        <input type="text" name="" id="" placeholder="Enter some text">
        <label for="">enter some text</label>
    </form>
</body>
</html>

 

required：必填的输入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>required</title>
    <style>
        span{
            opacity: 0
        }
        input:required + span{
            opacity: 1
        }
    </style>
</head>
<body>
    <form action="">
        <input type="text" name="" id="" placeholder="Enter some text" required>
        <span>required</span><br>

        <input type="text" name="" id="" placeholder="Enter some text">
        <span>required</span>
    </form>
</body>
</html>

 

 

disabled：禁止输入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>disabled</title>
    <style>
        span{
            opacity: 0
        }
        input:disabled{
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <form action="">
        <input type="text" name="" id="" placeholder="Enter some text" disabled>
    </form>
</body>
</html>

 

read-only：只读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>read-only</title>
    <style>
        span{
            opacity: 0
        }
        input:read-only{
            background-color: var(--gray-lighter);
        }
    </style>
</head>
<body>
    <form action="">
        <input type="text" name="" id="" placeholder="Enter some text" readonly>
    </form>
</body>
</html>

 

out-of-range：number类型的输入框超过了限定值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>out-of-range</title>
    <style>
        span{
            opacity: 0
        }
        input:out-of-range + span{
            opacity: 1
        }
    </style>
</head>
<body>
    <form action="">
        <input type="number" name="" id="" placeholder="Enter some text" min="0" max="10">
        <span>out of range</span>
    </form>
</body>
</html>

 

posted @ 2017-11-18 16:23  _Jo  阅读(148)  评论(0)  编辑  收藏  举报