How to find all inputs that are descendants of a form and mark them with a dotted red border in jQuery ?

Last Updated : 27 Apr, 2021

The task is to find all the inputs that are descendants (child or grandchild) of a form and mark them with a dotted red border using jQuery.

Methods and selectors used :

parent descendant selector: This selector is used to select all elements that are descendants of a specified element.
Syntax:
```
("parent descendant")
```
css() method: This method is used to set or return one or more style properties for the selected elements.

Approach:

Create the HTML page with the form element with their components like fieldset or inputs, etc.
Select the input of the form element using the parent descendant selector.
In the end, apply some CSS styling to show an appropriate result.

Example:

HTML

<!DOCTYPE html> 
  <html> 
  <head> 
  <script src= 
"https://code.jquery.com/jquery-git.js"> 
  </script> 
  <meta charset="utf-8"> 
  <meta name="viewport" 
        content="width=device-width"> 
   
  <style> 
      body{ 
          text-align:center; 
          font-size:20px; 
      } 
     form { 
        border: 5px green solid; 
        padding: 2px; 
        margin: 0; 
        background: lightgreen; 
     } 
    div { 
      color: red; 
     } 
    fieldset { 
        margin: 1px; 
        padding: 3px; 
    } 
  
  </style> 
  </head> 
  <body> 
      <h2 style="color:green">GeeksforGeeks</h2> 
  <form > 
  <fieldset> 
      
     <label for="fname"> 
       First name:</label> 
     <br> 
     <input type="text" id="fname" 
            name="fname" value=""> 
     <br> 
     <label for="lname"> 
       Last name:</label> 
     <br> 
     <input type="text" id="lname" 
            name="lname" value=""> 
     <br> 
     <label for="email"> 
       Enter your email:</label> 
     <br> 
     <input type="email" id="email" 
            name="email"> 
     <br> 
     <label for="birthday"> 
       Birthday:</label> 
     <br> 
     <input type="date" id="birthday" 
            name="birthday"> 
     <br> 
     <label for="quantity"> 
        Number:</label> 
     <br> 
     <input type="number" id="quantity" 
            name="quantity" min="1" max="5"> 
     <br> 
     <input type="submit" value="Submit"> 
  </fieldset> 
  </form>   
    
  <script> 
      $( "form input" ).css( "border", "2px dotted red"); 
  </script> 
  </body> 
  </html> 