<! DOCTYPEhtml>          
<html>          
<head>          
    <meta charset="UTF-8">      
    <meta name="viewport" content="Width =device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">    
    <title>Pseudo-class selectors: Checked will work with input of type Radio or checkbox and option</title>        
    <style type="text/css">  
        option:checked {color: red; }input:checked + span {background: #f00; }input:checked + span:after{content:"I've been chosen."; }</style>        
</head>          
<body>  
    <select>
        <option>Volvo</option>
        <option selected="selected">Saab</option>
        <option>Mercedes</option>
        <option>Audi</option>
    </select>

    <div><input type="radio" name="sex" value="male" checked><span>Male</span><div>
    <div><input type="radio" name="sex" value="female"><span>female</span></div> 

    <div><input type="checkbox" name="group" value="red" checked><span>red</span><div>
    <div><input type="checkbox" name="group" value="blue"><span>blue</span></div> 

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>   
    <script type="text/javascript">
    </script>
</body>          
</html>
Copy the code

\

\

Note: Welcome to join the web front-end job hunting qq group: 668352707\