CSS :out-of-range

Date:

[ad_1]

One aspect of web development I’ve always loathed was working with forms. Form elements have been traditionally difficult to style due to OS and browser differences, and validation can be a nightmare. Luckily the native HTML APIs added methods for improving the form validation situation.

With input[type=number] elements, you can add min and max attributes. Those attributes are great but the browser doesn’t display distinct error styles if those numbers are out of range. Luckily we have :out-of-range:

/* matches when number is not within min and max */
input[type=number]:out-of-range {
  border-color: red;
}

Thanks to CSS :out-of-range, developers can style input elements based on its valid value status. Despite the HTML validation and styling, you must still do server side validation; honestly, you probably also want to do JavaScript validation here too.

The post CSS :out-of-range appeared first on David Walsh Blog.

[ad_2]

Source link

Share post:

Subscribe

spot_imgspot_img

Popular

More like this
Related

Samsung Galaxy Tab S9 and Tab S9 Ultra appear on Geekbench

Samsung’s Galaxy Tab S9 series is expected to...

Life Evolves. Can Attempts to Create ‘Artificial Life’ Evolve, Too?

What is life? Like most great questions, this...

Former BitMex CEO Arthur Hayes Calls His Maelstrom Capital a ‘Very Patient’ Fund

Hayes, the former CEO of crypto exchange BitMex,...

Ponzi Schemes, Property Fraud, and How to NOT Fall for a Real Estate Scam

Real estate scams and Ponzi schemes have been...