<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>form 필터 선택자</title>
    <script src="jquery-3.3.1.min.js"></script> 
</head>
<body>
    <div><input type="text"></div>
    <div><input type="password"></div>
    <div><button>확인</button></div>
    <div><input type="checkbox" id="css" checked="checked"><label for="css">css</label></div>
    <div>
        <select>
            <option>과목선택</option>
            <option>javascript</option>
            <option selected="selected">jQuery</option>
        </select>
        <textarea cols="20" rows="5" disabled="disabled">javascript</textarea>
    </div>
</body>
</html> 
        $(document).ready(function() {            
            $("input:text").css("background","red");
            $("input:password").css("background","orange");
            $(":button").css("background","yellow");           
            $("input:checked + label").css("background","green");
            $("option:selected").css("color","blue");
            $("textarea:disabled").css("background","pink");
        });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js