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 =
</ 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:
Share your thoughts in the comments
Please Login to comment...