Is there a difference in the functionality of CSS :invalid between Chrome and Firefox?

I am facing a challenge with styling my invalid elements in HTML forms. It is simple in Chrome, but Firefox seems not to recognize my :invalid pseudoclass. To see the difference, try opening the following code snippet in both Chrome and Firefox:

<html>
    <head>
        <style type='text/css'>
            :invalid{
                color:#FF0000;
            };
        </style>
    </head>

    <body>
        <form>
            This box validates on inputs between 0 and 100:
            <input class='myInput' type='number' min='0' max='100'>
        </form>
    </body>
</html>

When you enter 101 into the input box, Chrome will turn it red while Firefox will not react. Any thoughts or suggestions on how to address this inconsistency between browsers?

Answer №1

Found on the Mozilla Wiki page

<input type='number'>

Number : Introducing a new input type for numbers : Bug 344616 : On hold


Referenced from Caniuse website :

Red = Not supported


Obtained from this more reliable source (credits to jukka-k-korpela) :

Type=number 6.0 (Localization in Chrome 11) Not supported Unimplemented (see bug 344616)

Currently not supported.

An alternative approach could involve utilizing Modernizr

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sketch a variety of numerical values in a circular formation

I was working on a number circle using the below fiddle, but I need it to always start from 0 at the top. How can I achieve this? Additionally, I would like to connect the numbers from the inner circle border to the number with a dotted line. How can I dr ...

Tips for storing information from an HTML form in MongoDB utilizing radio buttons and checkboxes

I'm struggling with saving data from radio buttons and checkboxes in my HTML form to a mongo database. Can anyone help me with this issue? Below is the HTML code I am working with: <div class="form-group"> <label>Photo:</label> ...

Is it possible to create floating unordered lists using Bootstrap in HTML?

Is there a way to float text left or maintain list order in the HTML code of my page while using a dense CSS from this bootstrap template? For example, I would like my list to remain organized regardless of how many items are added: https://i.sstatic.net ...

Guide to incorporating a fadeIn effect in Jquery triggered by a change event

Looking for some guidance on implementing a fade-in effect on a <p> tag with relevant CSS after making an AJAX call in response to a change event. Below is the current code snippet: $('#scenarioDropdownList').change(function() { var sc ...

What is the best way to center these icons vertically in my navigation menu using CSS?

My website has a navigation menu with third-party icon libraries (Material/FontAwesome) in use. I am facing an issue where the icons are not aligning vertically with the anchor text. Adjusting the font size of the icon to match the text results in it appe ...

Using a local HTML file in Firefox to connect to Jenkins Jason REST API seamlessly without any alterations to the server

Attempting to retrieve JSON data from the local Jenkins REST API, I created a basic HTML site with JavaScript for this purpose. Unfortunately, my browser is being overprotective and preventing this action due to settings that I cannot adjust (our admin is ...

Utilize AJAX to fetch and display the response from a Node JS route directly onto an HTML page

At the moment, I am retrieving client-side HTML/JS inputs (var1 and var2) which are then sent to server-side Node JS. The input values are stored in variables through an AJAX post call made to a specific route. What I want now is to define the values of v ...

Is it Necessary to Create a Separate Stylesheet for This, And if so, How Should it be Implemented? (Using PHP

Creating a customized WordPress options panel is an essential task. One of the key functionalities it offers is allowing users to select their preferred colors. To achieve this, I currently follow a method where I utilize a default stylesheet and then appl ...

"Enhance Your Table Design with Zebra Cells Using CSS in rich:data

How can I achieve a zebra color effect in every other cell of a rich:dataTable using CSS? <rich:dataTable value="#{uploader.files}" var="_data" id="files"> <rich:column> <f:facet name="header"> <h:outputText ...

HTML text field within the same line

Is there a way to create multiple text fields on the same line? I have tried this code: <div class="col-lg-2"> <div class="form-group"> <label>Working experience</label> <input type="text" class="form-contro ...

What is the best way to vertically align my content in the center?

Is there a way to vertically center all of the text content, especially focusing on the drop-down button and block, here? Despite my efforts to research and find solutions online, I have not been able to achieve the desired visual results. I am restricted ...

Ensure that the form is validated using ngDialog openConfirm before it can be closed

I am facing an issue with a button that triggers the opening of an ngDialog.openConfirm. In this dialog, there is a form containing a textarea that must have a minimum of 20 characters. Below is a simplified version of the code: someFunction() { let ...

JavaScript expression not being processed

What could be the reason behind not receiving the value for dish.price, dish,description, etc.? Where am I making a mistake in this code snippet? <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="utf-8"> < ...

CSS behaving strangely with the height property

I've run into a specific issue with a div element that contains multiple buttons. I am trying to adjust the height and position of one button so that it takes up space above the other buttons, but every time I make changes to its height and position, ...

Adjusting the position of just a single box in a flexible layout

I have multiple columns set up in a similar way. <div style="display: flex;flex-direction:column"> <main class="main-contents" role="main">TopHeader </main> <div> content A</div> <div> conte ...

Using template expressions to access properties that contain spaces

Here is the code structure that I am working with: "name": { "age": [ { "data": { "how old": "23" } }, One of my JSON keys has a space in it. How can I access this pr ...

Generate text in reStructuredText with columns

I'm attempting to style a reStructuredText segment in the following layout: type1 : this type4 : this type7 : this type2 : this type5 : this type8 : this type3 : this type6 : this type9 : this I want to fill the page with tex ...

jQuery mobile : accessibility helper for hidden elements

Within my HTML structure: <div data-role="fieldcontain" id="containdiv" class="no-field-separator"> <label for="field1" class="ui-hidden-accessible">To</label> <input type="search" name="field1" id="field1" autocorrect="off" a ...

How can I delete the header and footer on a personalized homepage design?

After crafting a unique home page/landing page for my website that stands out from the rest, I've come across an issue. The header and footer are appearing on this new page, but I only want to display what I specifically coded. I attempted using Site ...

Can file input buttons be custom styled?

Since I am using Material-UI, the traditional methods are not working for me. I have a form with two buttons positioned next to each other. One button is an "Upload File" input for users to upload a file, and the other is a submit button. I want both butto ...