In the last article, we learned about attribute selectors in CSS and it is really great to have some more selectors than just class or id. Moving forward, today we are going to style the forms using CSS. We have already learned to create forms using HTML. Let's style them so that they become more appealing to users...
Explanation:
Add Basic Styling
- width is set to 100% so that it occupies whole horizontal space
- padding is used to get padded inputs inside the input box
- the margin is used to get proper space between to input fields
- border-radius is making curved corners
Colored Inputs
Add background-color to input and color property to change the color of the input text.
Focused Inputs
Add hover pseudo-class to change input field when the user focuses on input.
That' all for today. You can use various styling techniques learned in CSS on forms to make them look as you want. In next post, we will study styling other form elements.
Till then #keepCoding.
Comments
Post a Comment