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:
<!DOCTYPE html>
<html>
<head>
<script src=
"https://releases.jquery.com/git/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>
Output:
