**CSS form** is used to create interactive forms for users and provides many ways to set the style.

There are many CSS properties available that can be used to create and style HTML forms to make them more interactive. A few of these are mentioned below:

- **Attribute Selector:** The attribute type can take a variety of forms based on what the user wants. It could be anything like text, search, URL, tel, email, password, date pickers, number, checkbox, radio, file, etc. The user just needs to specify the type while creating the form.


<html> 
   <head> 
       <style> 
       body{ 
           background-color:blue; 
       } 
       </style> 
   </head> 
 
   <body> 
       <center> 
           <b>Is this article useful?</b> 
           <form> 
               <input type="radio" name="useful" value="yes" checked>  
               Yes <br> 
               <input type="radio" name="useful" value="def_yes">  
               Definitely Yes   
           </form> 
       </center> 
   </body> 
</html>

codemirror


 - **Styling the Input Width:** The width property sets the width of the input field.  Look at the example below where the width is set to be 10% of the entire screen.


<!DOCTYPE html> 
<html> 
<head> 
    <style> 
        input{ 
            width:10%; 
        } 
          
        body{ 
            background-color:blue; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
    <form> 
        <b>Do you find Eduactive helpful?</b> 
            <br> 
        <input type="text" name="info"><br> 
    </form> 
    </center> 
</body> 
</html>


- **Border and Border-radius:** The border property is used to change the size and color of the border, whereas the `border-radius` property is used to add rounded corners.


<!DOCTYPE html> 
<html> 
<head> 
    <style> 
        input{ 
            width:10%; 
            margin: 8px; 
            border: 2px solid red; 
            border-radius: 4px; 
        } 
          
        body{ 
            background-color:blue; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <form> 
            <b> 
                Mention two Edpresso Shots that you liked on  
                Educative 
            </b> 
            <br> 
            <input type="text" name="info"><br> 
            <input type="text" name="info"><br> 
        </form> 
    </center> 
</body> 
</html> 



- **Adding Color to text and Background:** The color property changes the color of the input text. The background-color property changes the background color of the input field.


<!DOCTYPE html> 
<html> 
<head> 
    <style> 
        input{ 
            width:10%; 
            margin: 8px; 
            border: none; 
            background-color: blue; 
            color: black; 
        } 
          
        body{ 
            background-color:white; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <form> 
            <b> 
                Mention two Edpresso Shots that you liked  
                on Educative 
            </b> 
            <br> 
            <input type="text" name="info"><br> 
            <input type="text" name="info"><br> 
        </form> 
    </center> 
</body> 
</html>


- **Focus Selector:** The input field becomes outlined in blue when we click on it. You can change this behavior with the :focus selector.


<!DOCTYPE html> 
<html> 
<head> 
    <style> 
        input{ 
            width:10%; 
            margin: 8px; 
            color: black; 
        } 
          
        input[type=text]:focus { 
        border: 3px solid red; 
        background-color: blue; 
        } 
          
        body{ 
            background-color:white; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
    <form> 
        <b> 
            Mention two Edpresso Shots that you liked  
            on Educative 
        </b> 
        <br> 
        <input type="text" name="info"><br> 
        <input type="text" name="info"><br> 
    </form> 
    </center> 
</body> 
</html>


- **Transition Property:** You can use the transition property over the input field to bring change to the field size by specifying the relaxed and focused widths and the time period for which the operation will take place.

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
        input{ 
            width:10%; 
            margin: 8px; 
            color: black; 
        } 
          
        input[type=text]:focus { 
        border: 3px solid red; 
        background-color: blue; 
        } 
          
        body{ 
            background-color:white; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
    <form> 
        <b> 
            Mention two Edpresso shots that you liked  
            on Educative 
        </b> 
        <br> 
        <input type="text" name="info"><br> 
        <input type="text" name="info"><br> 
    </form> 
    </center> 
</body> 
</html>

What are CSS styling forms?

CSS forms create interactive user forms and can be styled using attribute selectors, input width, borders, colors, focus selectors, and transitions.