jQuery :reset selector

In this article, we are discussing how to use the :reset selector in jQuery. In jQuery, the :reset selector is used to select the elements of type reset. It selects the input elements and buttons with type = reset.

If we write input:reset, the selector will only select the input elements with type reset. Whereas, if we write :reset, the selector will select both input as well as button elements. So, we can also select specific elements of type reset using the :reset selector.

Syntax

Now, let's see an example of the :reset selector.

Example

To understand the use of :reset selector in jQuery, we are creating a simple HTML document into which we have created a form with the id = "myForm". In this form, there are four text fields and two buttons that are "Submit", and "Reset".

We are using the :reset selector to select the button elements of type reset. The button named as "Reset" is of type reset, so the :reset selector will select this button.

<!DOCTYPE html> 
<html>
<head> 
<title> jQuery :reset selector </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
</head>
<body>
<div style = "background: pink;">
  <font color = "red" size = "6px">
	<b> Example of the :reset selector </b>
  </font>
 </div>
    <div style = "background: lightblue;">
	<form id = "myForm" style = "font-size: 20px;" >
	<p> First Name: <input type = "text" id = "fname" /> </p>
	<p> Last Name: <input type = "text" id = "lname" /> </p>
	<p> E-mail Id: � <input type = "email" id = "email" /> </p>
	<input type = "submit">
	<button type = "reset"> Reset </button>
	</form>
    </div>
<script>
   $(document).ready(function() { 
            $("button:reset").css({"background-color": "coral", "font-size": "20px", "border": "4px dashed blue"}); 
        });  
</script>

</body>
</html>

Test it Now

Output

In the output, we can see that the style of the Reset button is changed. After the execution of the above code, the output will be -