Styling Empty Input Fields with CSS
One common styling need is to apply specific rules to empty input fields. This can be useful for providing visual cues to users, such as a placeholder text or a colored border. However, using the input[value=""] selector to target empty inputs may not work as intended.
In modern browsers, the :placeholder-shown pseudo-class provides a more reliable way to style empty input fields. This pseudo-class targets input fields where the placeholder text is currently visible, indicating that the input field is empty.
To apply a red border to an empty input field, you can use the following CSS:
input:placeholder-shown { border: 1px solid red; }
Note that you must also set a placeholder attribute on the input field in HTML:
Chrome requires at least a space character as the placeholder value to trigger the :placeholder-shown pseudo-class. This ensures that the input field is technically not empty while still allowing for user input.
By using :placeholder-shown, you can create custom styling that targets empty input fields and provides enhanced user feedback.
Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.
Copyright© 2022 湘ICP备2022001581号-3