Learnerslesson
   JAVA   
  SPRING  
  SPRINGBOOT  
 HIBERNATE 
  HADOOP  
   HIVE   
   ALGORITHMS   
   PYTHON   
   GO   
   KOTLIN   
   C#   
   RUBY   
   C++   
   HTML   
   CSS   
   JAVA SCRIPT   
   JQUERY   
JAVA SPRING SPRINGBOOT HIBERNATE HADOOP HIVE ALGORITHMS PYTHON GO KOTLIN C# RUBY C++ HTML CSS JAVA SCRIPT JQUERY


❮❮ PREV NEXT ❯❯


CSS - Forms


CSS helps us to apply styles to the Forms created in HTML. You can check the HTML Forms tutorial we already have.


Just to recap, a Form could be your college admission form. Where you need to fill up your details and submit it(If it is an online form). And you can create that form in HTML.


In other words, the form which you fill and submit is an HTML form.


There are two ways using which we can apply styles to an HTML form :

  1. Applying styles to the form element(i.e. Like the <input> element).

  2. Applying styles to the form element attribute(i.e. type="text" attribute of <input> element).


Let us see them in detail.


Applying styles to form element in CSS


We will be using the <input> element for applying styles to the form element.


Example : 



<html>
<head>
	<style>
		input {
    		width: 100%;
    		padding: 8px;
    		border: 2px solid gray;
    		background-color: MediumSeaGreen;
    		color: white;
		}
	</style>
</head>
<body>
	<form action=" ">
		<label for="user_name">User Name :</label>
  		<input type="text" id="user_name" name="User_Name"><br><br>
  		<label for="password">Password :</label>
  		<input type="password" id="password" name="Password"><br><br>
	</form> 
</body>
</html>


Output :



 

So, if you look at the above example, we have <input> elements for the form.


<input type="text" id="user_name" name="User_Name">

And,


<input type="password" id="password" name="Password">

And we have applied styles for the <input> elements using the CSS properties.


input {
	width: 100%;
	padding: 8px;
	border: 2px solid gray;
	background-color: MediumSeaGreen;
	color: white;
}

Now, if you look at the above output, both <input> elements have a solid gray border, green background color and other CSS properties defined.


Applying styles to form element attributes in CSS


Now, what if we want to apply CSS properties to the <input> element that accepts text input.


Let us see with the below example.


Example : 



<html>
<head>
	<style>
		input[type="text"] {
    		width: 100%;
    		padding: 8px;
    		border: 2px solid gray;
    		background-color: MediumSeaGreen;
    		color: white;
		}
	</style>
</head>
<body>
	<form action=" ">
		<label for="user_name">User Name :</label>
  		<input type="text" id="user_name" name="User_Name"><br><br>
  		<label for="password">Password :</label>
  		<input type="password" id="password" name="Password"><br><br>
	</form> 
</body>
</html>


Output :



 

So, if you look at the above output, CSS styles are applied only to the <input> element that has type="text".


<input type="text" id="user_name" name="User_Name">

That is because in the CSS we have selected the <input> element along with its attributes(i.e. input[type="text"]). 


input[type="text"] {
	width: 100%;
	padding: 8px;
	border: 2px solid gray;
	background-color: MediumSeaGreen;
	color: white;
}

Applying styles to form element using :focus selector in CSS


Example : 



<html>
<head>
	<style>
		input:focus {
    		border: 2px solid gray;
    		background-color: MediumSeaGreen;
    		color: white;
		}
	</style>
</head>
<body>
	<form action=" ">
		<label for="user_name">User Name :</label>
  		<input type="text" id="user_name" name="User_Name"><br><br>
  		<label for="password">Password :</label>
  		<input type="password" id="password" name="Password"><br><br>
	</form> 
</body>
</html>


Output :



 

So, when you click on the textbox, the background color changes to green and the border changes to solid gray.


This is because we have used the :focus selector with the <input> element(i.e. input:focus).


input:focus {
	border: 2px solid gray;
	background-color: MediumSeaGreen;
	color: white;
}


❮❮ PREV NEXT ❯❯