CSS Forms

CSS Forms are used to enhance the look of an HTML form.

 <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

CSS Forms-input fields

If you want to style a specific input type, you can use attribute selectors:

• input[type=text] – will only select text fields
• input[type=password] – will only select password fields
• input[type=number] – will only select number fields

input {
  width: 200%;
}

CSS Forms-padding input

You can use the padding property to add space inside the text field.

input[type=text] {
  width: 200%;
  padding: 13px 25px;
  margin: 9px 0;
  box-sizing: border-box;
}

CSS Forms-colored input

You can use the background-color property to add a background color to the input, and the color property to change the text color

input[type=text] {
  background-color: #FF1493;
  color: white;
}

CS Forms- image/icon input

If you want an icon inside the input, use the background-image property and position it with the background-position property.

input[type=text] {
  background-color: white;
  background-image: url('Media/flower.jpg');
  background-position: 15px 15px;
  background-repeat: no-repeat;
  padding-left: 50px;
}

CS Forms-styling menus

select {
  width: 200%;
  padding: 17px 25px;
  border: none;
  border-radius: 5px;
  background-color: #9400D3;
}