:after pseudo failing to function in most modern browsers other than Chrome

I've encountered an issue while creating an HTML5 form - my CSS works perfectly in all modern browsers except for Chrome:

input:focus:required:invalid:after, textarea:focus:required:invalid:after { content: "!"; font-size: 20px; margin: -18px 0 4px 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); display: block; float: right; color: #c40000; }

input:focus:required:valid:after, textarea:focus:required:valid:after { content: "\2713\0020"; font-size: 20px; margin: -18px -4px 4px 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); display: block; float: right; color: #009c00; }

Although this should show an exclamation mark when the input text is invalid and a checkmark as intended, Chrome seems to have other ideas.

I've attempted to use the :before pseudo element instead following advice here, but with no success. The CSS appears in Chrome's Developer Tools Styles, yet nothing is displayed on the screen. Please refrain from suggesting alternatives like using images instead of characters, as that solution is not acceptable to me. Any other suggestions would be greatly appreciated! :)

htmlcssgoogle-chrome

Answer №1

It is not recommended to use pseudo-elements on replaced content because the content is usually defined by the operating system rather than CSS, especially for form elements. The implementations may vary across different browsers due to this reason.

As mentioned in the Generated and Replaced Content Module:

Replaced elements do not support '::before' and '::after' pseudo-elements; the 'content' property replaces the entire contents of the element's box when it comes to replaced content.

Answer №2

Looks like I'll need to implement some jquery for cross-browser compatibility, especially in Chrome: http://api.jquery.com/after/

Alternatively, I could ditch the :after pseudo class altogether and opt for coloring required input boxes in red or a similar style.

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

Tips for preventing the use of inline styling in React

I am facing an issue with some variables set at the top of my functional component that are not being used except in styles: const testWidth = 100; const testHeight = 100; Although I use some of these variables in my styles... I am considering moving my ...

javascripthtmlcssreactjsinline-styles

Leveraging a global variable value within an AJAX JSON POST request

I want to send a JSON post request to my Elasticsearch instance using AJAX. Is it possible to include a global variable's value in the 'data' section of the request? Could it look something like this? $(document).ready(function() { $(&ap ...

jqueryhtmlajax

After the JavaScript calculation is completed, the following display may show a value of NaN

Check out my JavaScript calculation in action: Live Preview I've encountered an issue with the calculation script. After the initial calculation, it shows a NAN value on subsequent calculations without reloading the page. Is there a way to enable rep ...

javascripthtmlcalculator

What could be causing the malfunction in the cloning of the carousel item?

My goal was to create a carousel that displays multiple images in one slide. However, I encountered an issue where once the fourth image is reached, the other three images are forcibly hidden. I want to give credit to the original creator of this code snip ...

javascriptjavahtmljquerycss

Create a div element using JQuery mobile

I am experiencing an issue where a div on my webpage is supposed to refresh every 3 seconds, but the CSS is not being rendered correctly after each refresh. Below is the code I am using: HTML: <div id="statusbar"></div> JavaScript: $( docu ...

htmljquery-mobilerender

Tips for changing the content of a text input field using JavaScript/jQuery

I am looking to dynamically change the values of specific form elements, particularly input text fields. However, when I load my HTML page, the input field appears blank instead of containing the value 1. Below is an example of my current approach. <!D ...

javascriptjqueryformshtml

Tips for adding styles to the first and last elements of a printed page

I have created a dummy code example that generates multiple paragraph elements with some text in it. However, I need to add borders to the first and last elements to enhance the design. Here is the code snippet: <!doctype html> <html> <he ...

javascriptcssprintingpage-break-inside

Firefox fails to render SVG animation

Currently, I'm attempting to incorporate this unique animation into my website: http://codepen.io/dbj/full/epXEyd I've implemented the following JavaScript code in order to achieve the desired effect: var tl = new TimelineLite; tl.staggerFromTo ...

javascriptcssfirefoxsvggsap

Troubleshooting problem with video recording functionality using HTML 5 media streams

My HTML 5 code for video recording and uploading is encountering a JavaScript error when the start button is clicked. The error messages I am receiving are: "TypeError: webcamstream.record is not a function streamRecorder = webcamstream.record();" "TypeE ...

javascripthtml

Streamlined Infinite Scrolling Data Visualization Using SVG Implemented in HTML and CSS

I have developed a dynamic graph that continuously updates with new data points being plotted. Right now, I am utilizing requestAnimationFrame() to render the element positions 30 times per second, but performance can be sluggish with numerous SVG element ...

htmlcsssvgcss-transitionssvg-animate

A guide to generating an XML file on a user's device through JavaScript or jQuery

Is there a way to generate an XML file on the client's machine using JavaScript or jQuery? I am looking to write an XML file from my web application directly onto the client's machine. What would be the best approach to achieve this across multip ...

javascriptjqueryhtmlfirefoxgoogle-chrome

What is the reason for the crossed out background image CSS in the Datatables header within Zurb Foundation 5.5.3?

I am facing an issue with displaying images in a wide Datatables header. The design is based on the Zurb Foundation 5.5.3 framework. Does anyone know why this CSS code is being strikethrough in the image below? (you can view it at https://i.sstatic.net/l ...

cssdatatableszurb-foundationzurb-foundation-6zurb-foundation-5

What is the best way to extract a JavaScript variable value from an HTML dump or content?

I am attempting to extract the content of the JavaScript array variable "aDataSet" from an HTML content using a PHP script. I have tried using regular expressions, but so far have not been successful in retrieving the data. What would be the most effectiv ...

javascriptphphtml

How can I customize the media used for my background?

After setting my background image to 100vw and height to 100vh, how can I make it responsive so that when I decrease the page size there is no need to scroll left or right? body{ overflow-wrap: break-word; word-break: break-word; word-wrap: break-wor ...

htmlcss

What is the best way to create a button that functions as a toggle and changes its styling when clicked?

I have implemented the following code to update prices in my pricing table: function updatePrices() { var x = document.getElementById("prijs-small"); if (x.innerHTML === "17,50") { x.innerHTML = "13,50"; } else { x.innerHTML = "17,50"; } ...

javascripthtmljquerycsswordpress

ExtJS web displays appear differently when viewed on Chrome's toggle device mode versus a mobile browser

Greetings, I have been working on developing a web application that can be accessed through a mobile browser. Initially, I created the web application and tested it in mobile mode using Chrome's simulation feature. https://i.sstatic.net/aAvVW.jpg H ...

javascriptcssextjsbrowserextjs5

Tips for aligning text at the bottom of a div that has been floated to the right alongside another div

I have a parent container with two child divs inside; one div is floated to the left and the other is floated to the right. Here is my current layout: ┌─────────────┬─────────────┐ │ Text left ...

htmlcss

The issue with linking to files on a custom 404 error page is that it doesn't function properly when

Having some trouble with my 404 page. I seem to have figured out the issue. The following URL works fine: sia.github.io/404.html and so does this one: sia.github.io/ooofdfsdfaablahblah However, when navigating to sia.github.io/1/2/3/, everything seems to ...

javascripthtmlthree.js

Display a concealed text box upon clicking BOTH radio buttons as well as a button

Below is the HTML code for two radio buttons and a button: <body> <input data-image="small" type="radio" id="small" name="size" value="20" class="radios1"> <label for=&qu ...

javascripthtmljqueryradio-button

The .click function in jQuery ceases to function after being utilized once

I've encountered an issue with my .click jQuery function. The desired behavior is that when I click the button, one div should be hidden (display:none) and another div should be shown (display:block). This works as expected the first time the button i ...

javascriptjqueryhtmlclickdisplay