? Forms in CSS

CSS lets you style HTML form elements like inputs, buttons, checkboxes, selects, and textareas to improve usability and appearance.

Common Form Elements to Style

• <input> (text, password, checkbox, radio, etc.)

• <textarea>

• <select>

• <button>

Basic Styling Examples

1. Style Text Inputs and Textarea

input[type="text"], textarea {  width: 100%;  padding: 10px;  border: 1px solid #ccc;  border-radius: 4px;  font-size: 16px;  box-sizing: border-box; /* Includes padding in width */  transition: border-color 0.3s;}input[type="text"]:focus, textarea:focus {  border-color: #007bff;  outline: none;}

2. Style Buttons

button {  background-color: #28a745;  color: white;  padding: 12px 20px;  border: none;  border-radius: 5px;  cursor: pointer;  font-size: 16px;  transition: background-color 0.3s;}button:hover {  background-color: #218838;}

3. Style Select Dropdown

select {  padding: 10px;  border: 1px solid #ccc;  border-radius: 4px;  background-color: white;  font-size: 16px;  cursor: pointer;}

4. Checkboxes and Radios

Styling checkboxes and radio buttons can be tricky because of browser defaults, but here’s a simple custom style:

input[type="checkbox"], input[type="radio"] {  width: 18px;  height: 18px;  cursor: pointer;}

For fully custom designs, you often hide the default input and use labels + CSS ::before or ::after pseudo-elements.

Example Form Container

form {  max-width: 400px;  margin: 20px auto;  padding: 20px;  background: #f9f9f9;  border-radius: 6px;  box-shadow: 0 2px 5px rgba(0,0,0,0.1);}

Tips for Styling Forms

• Use box-sizing: border-box to make sizing easier.

• Add focus styles to improve accessibility.

• Use consistent spacing (margins/padding) for inputs and labels.

• Use CSS variables for colors to keep them consistent.

Want me to help you build a full styled form or show advanced form styling with custom checkboxes, validation styles, or animations?