Use the :enabled pseudo-class selector to change the styles of available form elements

Use the :enabled pseudo-class selector to change the style of available form elements. Specific code examples are required

In web development, form elements are an indispensable part . When designing forms, we often need to change the styles of form elements based on their status to improve user experience. In this regard, CSS pseudo-class selectors provide us with a good solution. One of the commonly used pseudo-class selectors is: enabled.

:The enabled pseudo-class selector is used to select available form elements. By setting specific styles for these elements, we can distinguish between available and unavailable form elements, thereby providing a more friendly and intuitive user interface.

Here are some specific code examples showing how to use the :enabled pseudo-class selector to change the styles of available form elements. First, we can render form elements by setting some basic styles:

input, select, textarea {
  padding: 10px;
  border: 1px solid #ccc;
}

select {
  width: 200px;
}

textarea {
  resize: vertical;
}

input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #45a049;
}

Next, we can use the :enabled pseudo-class selector to distinguish between available and unavailable form elements and set different style. For example:

input:enabled, select:enabled, textarea:enabled {
  background-color: white;
  color: black;
}

input:disabled, select:disabled, textarea:disabled {
  background-color: #f9f9f9;
  color: #aaa;
}

Through the above code, we set the background color of available form elements to white and the font color to black, while the background color of unavailable form elements is set to gray and the font color is set to light grey. This way, users can clearly distinguish between available and unavailable form elements when filling out a form.

In addition, we can also use the :enabled pseudo-class selector to set other styles for the available form elements, such as changing the border color, adjusting the font size, etc. For example:

input:enabled {
  border-color: #4CAF50;
}

select:enabled {
  outline: 2px solid #4CAF50;
  font-size: 16px;
}

textarea:enabled {
  border-color: #4CAF50;
  font-family: Arial, sans-serif;
}

Through the above code, we set the green border color for the available text input box, set the green outer border for the available drop-down menu and adjust the font size, and set the font size for the available multi-line text. The box is set with a green border color and font style.

In short, using the :enabled pseudo-class selector can help us distinguish between available and unavailable form elements, thereby providing a more intuitive and friendly user interface. By setting different styles, we can let users clearly know which form elements can input data and which form elements are not available. This method of changing the style of form elements can greatly improve the efficiency and experience of users filling out forms. I hope this article can help you better understand and apply the :enabled pseudo-class selector.

The above is the detailed content of Use the :enabled pseudo-class selector to change the styles of available form elements. For more information, please follow other related articles on the PHP Chinese website!