CSS Forms





In this lesson we will demonstrate several ways to style components.


In the next example, we use CSS to improve the HTML form style:




Try yourself >>





CSS Input with icon/image


In this example we demonstrate how to use CSS to style search form.



Code Example:

                
                
<style> 
input[type=text] {
  border: 2px solid #ccc;
  box-sizing: border-box;
  border-radius: 4px;
  width: 100%;
  font-size: 16px;
  background-color: white;
  /* path of search icon image */
  background-image: url('../img/searchic22on.png-3.png');
  /* size of the search icon */
  background-size: 30px;
  /* position of the search icon */
  background-position: 4px 7px;   
  padding: 12px 18px 14px 38px;
  background-repeat: no-repeat;}
</style>
    
              
                
            
Try yourself >>



Animated Search Form with icon


You can use the CSS transition property to animate the width of the search input when it gets focus, using CSS transition property


Click on the search icon:



Code Example:

                
                <html>
<head>
<style> 
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
</style>
<form>
  <input type="text" name="search" placeholder="Search..">
</form>
    
              
                
            
Try yourself >>





CSS Input Fields styling


You can control the width of the field using width property:



Code Example:

                
                
<style> 
input {
  width: 100%;
}
</style>
<p>enter name</p>
<form>
  <label for="first_name">first name</label>
  <input type="text2" id="first_name" name="first_name">
</form>
    
              
                
            
Try yourself >>


If you want to style specific input field, there are 3 methods:


  • input[type=text] - control text fields, you can also create many input fields and use diffrenet type for each one, then style each one diffrenetly
  • input[type=number] - control number fields
  • input[type=password] - control password fields





CSS Textarea Styling


You can control the size of the Textarea:



Code Example:

                
                  
<style>
textarea {
  height: 130px;
  padding: 11px 22px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
  border: 2px solid #ccc;
  background-color: #ECECEC;
  font-size: 16px;
  resize: none;}
</style>
  
              
                
            
Try yourself >>




CSS Padded Inputs


You can control the space inside text area using the padding property:



Code Example:

                
                  
<style>
input[type=textarea] {
  width: 100%;
  margin: 8px 0;
  padding: 11px 18px;
  box-sizing: border-box;}
</style>
  
              
                
            
Try yourself >>





CSS Colored Inputs


You can control the background color background-color property


and the color property to change the color of the text



Code Example:

                
                  
<style>
input[type=text_area] {
  padding: 13px 22px;
  width: 100%;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  background-color: #00C5CD;
  color: black;}
</style>
  
              
                
            
Try yourself >>





CSS Bordered Inputs


You can control the border size and color using the border property


Also add rounded corners to property using the border-radius


and the color property to change the color of the text



Code Example:

                
                  
<style>
input[type=text_field] {
  border: 2px solid blue;
  border-radius: 5px;
}
</style>
  
              
                
            
Try yourself >>





CSS Responsive Form


Resize the browser window to see the effect. When the screen is less than 600px wide, the style of the page/component changes.


The next example use media queries method to create responsiveness, check our media queries guide for more information.



Code Example:

                
                  
<style>
<div class="container_responsive">
  <form action="/action_page.php">
  <div class="row">
    <div class="col-25">
      <label for="firstnamename">First name</label>
    </div>
    <div class="col-75">
      <input type="text_responsive" id="firstname" name="firstname" placeholder="Enter name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="lastname">Last Name</label>
    </div>
    <div class="col-75">
      <input type="text_responsive" id="lastname" name="lastname" placeholder="Enter last name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="country">Country</label>
    </div>
    <div class="col-75">
      <select id="country" name="country">
        <option value="australia">Germany</option>
        <option value="canada">USA</option>
        <option value="usa">Russia</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="subject">Subject</label>
    </div>
    <div class="col-75">
      <textarea id="subject" name="subject" placeholder="Add text here..." style="height:180px"></textarea>
    </div>
  </div>
  <div class="row">
    <input type="submit" value="Submit">
  </div>
  </form>
</div>
</style>
  
              
                
            
Try yourself >>





CSS Select Menus





Code Example:

                
                  
                <style>
                input[type=submit] {
  background-color: #00C5CD;
  border: none;
  padding: 18px 30px;
  color: white;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;}</style>

/* comment: change width value to control button size */
  
              
                
            
Try yourself >>





CSS Input Buttons Styling







Code Example:

                
                  
<style>
input[type=submit] {
  background-color: #00C5CD;
  border: none;
  padding: 18px 30px;
  color: white;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;}
   
input[type=submit1] {
  background-color: #00C5CD;
  border: none;
  padding: 18px 30px;
  color: white;
  text-decoration: none;
  margin: 6px 2px;
  width:100%;
  text-align:center;
  cursor: pointer;}
       select {
  padding: 14px 22px;
  width: 100%;
  border: none;
  border-radius: 5px;
  background-color: #ccc;
}
</style>
  
              
                
            
Try yourself >>








enjoy this css full course, our main goal is to create css3 tutorial with examples,our courses are free, learn css3 online.



Navigation