CSS - Form Control

Styling Input Fields

input[type="text"] {
  width: 200px;
  height: 30px;
  padding: 5px;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

input[type="password"] {
  width: 200px;
  height: 30px;
  padding: 5px;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

input[type="password"]::placeholder {
  color: #999;
  font-style: italic;
}

textarea {
  width: 300px;
  height: 100px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
  font-size: 14px;
  resize: vertical;
}

Styling Checkboxes and Radio Buttons

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  background-color: #fff;
}

input[type="checkbox"]:checked {
  background-color: #007bff;
  border-color: #007bff;
}

input[type="radio"] {
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  background-color: #fff;
  border-radius: 50%;
}

input[type="radio"]:checked {
  background-color: #007bff;
  border-color: #007bff;
}

Styling Select Dropdowns

Select dropdowns are form controls that let users choose from a list of options. To style select dropdowns in CSS, you can use the select selector. This selector targets all <select> elements on the page.

To change the size of the select dropdown, you can change the width and height properties. Set the width to control the horizontal space the dropdown takes up, and set the height to change the height of the dropdown box. You can also add padding to create space inside the dropdown.

To style the border and background of the select dropdown, use the border and background-color properties. The border property lets you set the width, style, and color of the border around the dropdown. The background-color property sets the background color of the dropdown.

select {
  width: 200px;
  height: 30px;
  padding: 5px;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
}

By default, the look of the dropdown arrow changes across browsers. To have a consistent look, you can use the appearance property with a value of none to remove the default styling. Then, you can add your own custom background image or icon to represent the dropdown arrow.

select {
  appearance: none;
  background-image: url('arrow.png');
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 25px;
}

To further customize the options inside the select dropdown, you can use the option selector. This selector targets the <option> elements within the <select> element. You can style the options by changing their background color, text color, and other properties.

select option {
  background-color: #fff;
  color: #333;
  padding: 5px;
}

select option:hover {
  background-color: #f5f5f5;
}

By using these CSS styles, you can create good-looking and customized select dropdowns that match your website's design. Try different properties and values to get the look and feel you want for your dropdowns.

Styling Buttons

Buttons are interactive elements in web forms. To style buttons in CSS, you can use the button selector or the input[type="submit"] selector for submit buttons.

To change the size of a button, you can use the width and height properties. Set the values to control the button's size. You can also add padding to create space inside the button, making it easier to click.

Use the border property to style the border around the button. You can set the border width, style, and color. The background-color property lets you set the background color of the button, while the color property sets the text color.

button {
  width: 120px;
  height: 40px;
  padding: 10px;
  border: none;
  background-color: #007bff;
  color: #fff;
  font-size: 16px;
}

To provide visual feedback when a user interacts with a button, you can use pseudo-classes like :hover and :active. The :hover pseudo-class styles the button when the user hovers over it with the mouse, while the :active pseudo-class styles the button when it is being clicked.

button:hover {
  background-color: #0056b3;
}

button:active {
  background-color: #004085;
}

To further improve the user experience, you can add the cursor: pointer property to the button. This changes the mouse cursor to a pointer when hovering over the button, indicating that it is clickable.

button {
  cursor: pointer;
}

By applying these CSS styles, you can create appealing and interactive buttons in your web forms. Try different colors, sizes, and styles to match your website's design and provide a good user experience.

Responsive Form Styling

When designing forms, it's important to think about the responsiveness of the form controls to make sure they look good and work well on different screen sizes and devices. CSS provides tools for creating responsive form styling.

One way to make form controls responsive is by using CSS media queries. Media queries let you apply different styles based on the screen size or device characteristics. By using media queries, you can change the styling of form controls at specific breakpoints to improve their display on different devices.

/* Default styles for form controls */
input[type="text"],
textarea {
  width: 100%;
  padding: 10px;
  font-size: 16px;
}

/* Media query for smaller screens */
@media (max-width: 600px) {
  input[type="text"],
  textarea {
    font-size: 14px;
    padding: 8px;
  }
}

In the above example, the default styles are applied to text input fields and textareas. The width is set to 100% to make them take up the full width of their container. The padding and font-size are also set for readability. Then, a media query is used to target screens with a maximum width of 600 pixels. Inside the media query, the font size is reduced, and the padding is adjusted to better fit smaller screens.

Another aspect of responsive form styling is changing sizes, paddings, and margins of form controls. By adjusting these properties based on the screen size, you can make sure that form controls are the right size and have enough space around them for easy interaction on different devices.

/* Default styles for form controls */
input[type="text"],
textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
}

/* Media query for smaller screens */
@media (max-width: 600px) {
  input[type="text"],
  textarea {
    padding: 8px;
    margin-bottom: 10px;
  }
}

To create responsive form layouts, you can use CSS flexbox or grid layout. These layout techniques let you create flexible and adaptable form structures that adjust based on the available space.

.form-container {
  display: flex;
  flex-wrap: wrap;
}

.form-group {
  flex: 1 1 300px;
  margin: 10px;
}

@media (max-width: 600px) {
  .form-group {
    flex: 1 1 100%;
  }
}

In this example, the .form-container is set to display: flex to create a flex container. The flex-wrap: wrap property allows the form groups to wrap to the next line if there isn't enough space. Each .form-group is given a flex basis of 300px and can grow and shrink as needed. The margin property adds spacing between the form groups. The media query targets smaller screens and sets the flex basis to 100% to make the form groups take up the full width on small devices.

By using CSS media queries, adjusting sizes, paddings, and margins, and using flexbox or grid layout, you can create responsive form styling that looks great and works well on different devices and screen sizes.