Skip to content
Related Articles

Related Articles

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

Improve Article
Save Article
  • Last Updated : 27 Apr, 2021
Improve Article
Save Article

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.


    ("parent descendant")
  2. css() method: This method is used to set or return one or more style properties for the selected elements.


  • 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.



<!DOCTYPE html>
  <script src=
  <meta charset="utf-8">
  <meta name="viewport" 
     form {
        border: 5px green solid;
        padding: 2px;
        margin: 0;
        background: lightgreen;
    div {
      color: red;
    fieldset {
        margin: 1px;
        padding: 3px;
      <h2 style="color:green">GeeksforGeeks</h2>
  <form >
     <label for="fname">
       First name:</label>
     <input type="text" id="fname" 
            name="fname" value="">
     <label for="lname">
       Last name:</label>
     <input type="text" id="lname" 
            name="lname" value="">
     <label for="email">
       Enter your email:</label>
     <input type="email" id="email" 
     <label for="birthday">
     <input type="date" id="birthday" 
     <label for="quantity">
     <input type="number" id="quantity" 
            name="quantity" min="1" max="5">
     <input type="submit" value="Submit">
      $( "form input" ).css( "border", "2px dotted red");


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!