Skip to content
Related Articles

Related Articles

Improve Article

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 :

  1. parent descendant selector: This selector is used to select all elements that are descendants of a specified element.

    Syntax:

    ("parent descendant")
  2. 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=
  </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>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :