How to find all inputs that are descendants of a form and mark them with a dotted red border in jQuery ?
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" >w3wiki</ 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:
Contact Us