In the last Article, we learned about styling the form elements and we covered input part of forms. In this article, we are going to cover remaining parts of form like menus and buttons.
Let's begin...
select {
width: 100%;
padding: 15px 15px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
input[type=button] {
background-color: blue;
border: none;
color: white;
padding: 15px 30px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
That's all for today. In the next article, we will learn about something new.
Till then #keepCoding.
Let's begin...
Style Menus
As we know, that to menus in HTML we use a select tag with dropdowns defined in options.We can use this select tag to Style the menus.select {
width: 100%;
padding: 15px 15px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
Button Styling
We have to cancel all text decorations to remove underline which is default. Also set cursor value to pointer so that to change how our mouse works.input[type=button] {
background-color: blue;
border: none;
color: white;
padding: 15px 30px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
Let's create a final form using all the points learned in this two articles...
That's all for today. In the next article, we will learn about something new.
Till then #keepCoding.
