Styling Input Elements

Styling input elements in CSS involves using various properties to enhance the appearance and functionality of forms.

Here is an example showing a basic form with a text input, radio button, checkbox and a submit button

HTML CODE:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Styled Input Elements</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <form>
      <div>
        <label for="text-input">Text Input:</label>
        <input type="text" id="text-input" />
      </div>
      <div>
        <label for="radio-input">Radio Input:</label>
        <input type="radio" id="radio-input" name="radio-group" />
      </div>
      <div>
        <label for="checkbox-input">Checkbox Input:</label>
        <input type="checkbox" id="checkbox-input" />
      </div>
      <div>
        <input type="submit" value="Submit" />
      </div>
    </form>
  </body>
</html>

CSS CODE:

/_ Styling Text Input _/ input[type="text"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  width: 100%;
}

/_ Styling Radio Button _/ input[type="radio"] {
  margin-right: 10px;
}

/_ Styling Checkbox _/ input[type="checkbox"] {
  margin-right: 10px;
}

/_ Styling Submit Button _/ input[type="submit"] {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

/_ Hover Effect for Submit Button _/ input[type="submit"]:hover {
  background-color: #0056b3;
}

Different input elements

Explanation of properties

Text Input:
- padding: Adds space inside the input for better readability.
- border: Defines the border around the input.
- border-radius: Rounds the corners of the input.
- font-size: Sets the font size for the input text.
- width: Makes the input take up 100% of its container’s width.
Radio Button:
- margin-right: Adds space between the radio button and the label.
Checkbox:
- margin-right: Adds space between the checkbox and the label.
Submit Button:
- padding: Adds space inside the button for better readability.
- border: Removes the default border.
- border-radius: Rounds the corners of the button.
- background-color: Sets the background color.
- color: Sets the text color.
- font-size: Sets the font size for the button text.
- cursor: Changes the cursor to a pointer when hovering over the button.
- hover state: Changes the background color when the button is hovered over.