26) Styling Forms.css

1) Styling Text Fields & Text Areas:
The text fields and textareas in forms can be styled in multiple ways using: 
width, height, padding, border, color, background-color, and fonts.

HTML:
<form>
    <p>Rounded corners:</p>
    <input id="input1" type="text" placeholder="Type something">
    <p>Only bottom border:</p>
    <input id="input2" type="text" placeholder="Type something">
    <p>Larger font size and background color:</p>
    <textarea placeholder="Type something"></textarea>
</form>

CSS:
p {
    margin: 20px 0 10px;
}
#input1 {
  width: 300px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid darkgray;
}
#input1:focus, #input1:hover {
  outline: none;
  border: 1px solid black;
}
#input2 {
  width: 250px;
  border: none;
  border-bottom: 1px solid black;
}
textarea {
  width: 250px;
  height: 80px;
  padding: 8px 12px;
  font-family: serif;
  font-size: 18px;
  background-color: lightyellow;
}

2) Width & Height for Text Inputs:
Just like any other element in HTML, we can give a width and height to text fields and text areas using any of the sizing units.
HTML:
<form>
  <input type="text" placeholder="Your Name">
  <textarea placeholder="Your Bio"></textarea>
</form>

CSS:
form {
  width: 300px;
  border: 3px solid black;
}
input {
  width: 200px;
  height: 25px;
}
textarea {
  width: 100%;
  height: 100px;
}
/*The textarea in the above example occupies 100% width of its parent element, form.*/

3) selecting input by type:
If we use the input selector for styling, the changes will apply to all types of inputs including text input= fields, radio buttons, checkboxes, button input types, etc
To style each type of input differently, we can select these elements using the attribute selector:
input[type="value"]

4) Padding & Margin for Text Inputs:
We can add spacing within the text fields and text areas using the padding property 
and spacing around these input types using the margin property!

Example:
input[type="text"], textarea {
  padding: 15px;
  margin: 10px 0;
  width: 300px;
}

5) Border for text inputs:
Text input fields and textareas have a border by default.
But we can change their look using the border property, border: ;!
Can create rounder border, using: border-radius: ;!

6) Color for text inputs:
We can set the text color and background color of text inputs using the color and background-color properties!
/*If we don't specify any border color, the text color is applied to the border too.*/

7) Font and Font Size for Text Inputs:
a) By default, the text field has a sans-serif font and the textarea has a serif font. 
The font sizes are different too.

b) Most of the HTML elements inherit the font family and font size from body. 
But the text input fields don't. They use their default values. To customize, we need to specify these properties separately


Example:
input[type="text"], textarea {
  width: 300px;
  padding: 15px;
  margin: 5px 0;
  width: 20em;
  border: 1px solid lightgray;
  font-family: 'Helvetica', sans-serif;
  font-size: 1em;
}

8) Textarea Resize:
Used to resize textarea!
syntax: resize: horizontal/vertical/none/both!

once we have given the syntax, we can scratch the box from the bottom right!

9) Styling select inputs:
The select input can be styled in the standard manner much like any other HTML element or a form element!

HTML:
<form>
  <p>
    Are you happy with our service?
  </p>
  <select name="review">
    <option value="5">Very Happy</option>
    <option value="4">Satisfied</option>
    <option value="3">Neutral</option>
    <option value="2">Unhappy</option>
    <option value="1">Disappointed</option>
  </select>
</form>

CSS:
select {
  padding: 15px;
  margin: 5px 0;
  width: 20em;
  border: 1px solid lightgray;
  background-color: beige;
  font-family: 'Helvetica', sans-serif;
  font-size: 1em;
}

10) Styling buttons:

CSS:
input[type="button"] {
  width: 100px;
  padding: 12px 16px;
  background-color: #4568bb;
  color: white;
  font-family: sans-serif;
  font-size: 0.9em;
  border: none;
  border-radius: 5px;
}

input[type="reset"] {
  width: 100px;
  padding: 12px 16px;
  margin-left: 10px;
  background-color: white;
  color: #4568bb;
  font-family: sans-serif;
  font-size: 0.9em;
  border: 1px solid #4568bb;
  border-radius: 5px;
}

input[type="submit"] {
  width: 100%;
  padding: 15px 0;
  margin-top: 10px;
  background-color: green;
  color: white;
  font-family: sans-serif;
  font-size: 1em;
  border: none;
}

11) Hover & Focus Styles:
When you take your mouse over a text input or a button, the background or border colour can be changed using the :hover pseudo-class selector!

a) Hover:
HTML:
<input type="text" id="email" placeholder="Email ID">
<input type="button" id="subscribe" value="Subscribe">

CSS:
#email {
  border: solid 1px #dddddd;
  padding: 10px;
}
#subscribe {
  padding: 10px;
  border: none;
  background-color: #6789ff;
  color: white;
}
/* Hover styles below */
#email:hover {
  border: solid 1px #888888;
}
#subscribe:hover {
  background-color: #4567de;
  cursor: pointer;
}

b) focus:

#email:hover, #email:focus {
  border: solid 1px #888888;
  outline: none;
}
#subscribe:hover, #subscribe:focus {
  background-color: #4567de;
  cursor: pointer;
}