详解：18:in-range :out-of-range

贵哥的编程之路

发布于 2020-10-28 12:14:02

5130

发布于 2020-10-28 12:14:02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        input[type="number"]:in-range
        {
            border: 1px solid red;
        }
        input[type="number"]:out-of-range
        {
            border: 1px solid yellow;
        }
    </style>
</head>
<body>
    <form>
        用户名:<input type="text" name="username" id="" placeholder="请输入" required="required" ><br>
        密码:<input type="password" name="password" id="" required="required" placeholder="你输入"><br>
        邮箱:<input type="text" name="email" id="" required="required"  placeholder="请输入"><br>
        年龄:<input type="text" name="age" id="" placeholder="输入"><br>
        性别:<input type="radio" name="sex" id="" value="1">男
        <input type="radio" name="sex" id="" value="2">女
        <input type="radio" name="sex" id="" value="3" checked="checked">保密<br>
        兴趣爱好:
        <input type="checkbox" name="fav[]" id="" value="1" checked="checked" />PHP
        <input type="checkbox" name="fav[]" id="" value="2" checked="checked" />PHP
        <br>    
        <input type="email" placeholder="2306613258@qq.com">
        年龄<input type="number" min="1" max="3" value="1">
        <input type="submit" name="" value="reg">
    </form>
</body>
</html>

问题：怎么显示input[type=“number”]:out-of-range { border: 1px solid yellow; }呢 ?在里面填写即可，不要按