The visual symbol is not being shown on the selection box in Mozilla Firefox

I've encountered an issue with a checkbox I created to display a + and - for expand and collapse functionality. HTML Code:

<input type=checkbox class="ins" ng-model=show ng-class='{open:show}'><b>Show</b>

CSS code:

 .ins {
        -moz-appearance:none;
        -o-appearance:none;
        -webkit-appearance: none;
        width: 14px;
        height: 14px;
    }
    .ins:after {

        content: ' + ';
        font-weight: 800;

    }
    .ins.open[type=checkbox]:after {

        content:" - ";
        font-weight: 800;
    }

https://jsfiddle.net/1jj1714e/

While it works perfectly fine on Chrome, the same code does not work on Mozilla Firefox.

javascripthtmlcssangularjsfirefox

Answer №1

There has been a discussion on Stack Overflow regarding the limitations of using the :after and :before pseudo-elements with an input field.

In summary, it has been noted as a "non-standard conformance" issue, although there are reports that it functions "perfectly fine" on Chrome.

Answer №2

:before and :after pseudo-elements cannot be applied to certain elements with no content, such as the <input type="checkbox" />.

Other examples of elements that do not support pseudo-elements include:

  • <input type="radio" />
  • <input type="text/date/email/number/whathaveyou" />
  • <br />
  • <hr />

While some browsers may allow pseudo-elements to be used on certain elements, it is best not to rely on this behavior as it may not be standards-compliant and could change in the future.

To work around this limitation, you can hide the checkbox, wrap everything in a label, and use the :checked pseudo-class along with the adjacent sibling selector + to style your "icon" using b:before.

https://jsfiddle.net/1jj1714e/1/

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

Unable to establish a new pathway in the index.js file of a Node.js and Express website running on Heroku

I recently made some changes to my index.js file: const express = require('express'); const path = require('path'); const generatePassword = require('password-generator'); const fetch = require('node-fetch'); const ...

javascriptnode.jsreactjsexpress

What causes my scene to appear black until OrbitControl is activated in ThreeJS?

What causes the scene in ThreeJS to only appear after clicking and moving the cursor? The page remains black until I interact by clicking and moving, then everything shows up. I'm stumped on what the issue could be. Any assistance would be greatly ap ...

javascriptthree.js

Is there a glitch with the External Style Sheet in the CodeIgniter PHP framework?

I inserted the following code into my search.php view page, which had an external style sheet. To include the style sheet in this file, I used: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> However, it doe ...

phphtmlcsscodeigniterframeworks

Creating a Full-Width Form Using Bootstrap

I need help aligning 3 form boxes side by side with a total width of 100%. I want to be able to specify the width of each box, or have the last two boxes set to their default size while the first box fills up the remaining space. Here is my current code: ...

htmltwitter-bootstraptwitter-bootstrap-3

Tips for troubleshooting Angular bugs and errors

As I dive into learning Angular, I've encountered several vague errors in Chrome's console that are quite puzzling. Like the one shown in the screenshot below Any tips on how I can effectively diagnose and fix these issues? ...

angularjs

Secondary menu supersedes primary dropdown menu

Having trouble getting a vertical dropdown menu to work properly, with the submenus overriding the main menu. I've searched everywhere for a solution but can't seem to find one. Anyone out there who could help me figure this out? Here's the ...

htmlcss

White line appears in Chrome and Safari when using Bootstrap 4 image grid with rows

A grid has been created in Bootstrap 4 with the following structure: <div class="container-fluid"> <div class="row padding"> <div id="workshop1" class="col-lg-6 nopadding"> <img src="images/Werkstatt/image_05.jpg" class="i ...

imagegoogle-chromefirefoxbootstrap-4safari

Tips for accessing a child element within a specific div from a selection of divs in Angular

I recently started learning angular and I am working on a project that involves displaying a list of people. Each person's name is displayed along with a button to send a friend request. When the send request button is clicked, it should disappear and ...

htmlangularangularjs-directive

Just starting out with callback functions (using a callback as an argument)(Javascript)

Hello everyone, I'm a beginner here and I have a question about callback functions. Upon reading about them, I felt like I understood the concept. However, when I attempted to implement one in my code, things didn't go as planned. functio ...

javascriptcallback

Proceed with the execution of the script after a successful completion of the jQuery AJAX request

I am facing a challenge with my click function that needs to open a popup window once the ajax call is successful. I have tried different solutions like setting async: false, placing the popup in the ajax call (which got blocked by the browser), and using ...

javascriptjquerypopup

Calculating the percentage in a jQuery Slider

For a while now, I've been using var slideWidth = 420; to set the width of sliders and then $('#slideInner').css('width', slideWidth * numberOfSlides); to calculate the total width of all sliders effectively in pixels. An Issue Ar ...

javascriptjquery

Tips for concealing subsequent pages and displaying pagination in jQuery ajax response

Is there a way to display pagination based on a limiter in an ajax response? For example, if the limiter is set to 5, only show 10 page links and hide the rest. 1 2 3 4 5 6 7 8 9 10 .. next 11 12 13 14 15.. next I attempted to count the li elements in ...

javascriptjqueryajax

Adding plain HTML using jQuery can be done using the `.after()` and `.before()` methods

I have encountered a situation where I need to insert closing tags before an HTML element and then reopen it with the proper tags. The code snippet I am using is as follows: tag.before("</div></div>"); and then re-open it by adding proper tag ...

javascriptjqueryhtml

Decrease the height of h1 by using the display property set to table-cell

I managed to center text inside a table cell using display: table-cell, vertical-align: middle, and text-align: center. However, I'm experiencing unwanted spacing above and below the text. How can I completely eliminate it? I want zero margin/padding ...

htmlcsscellspacing

Tips for adjusting the placement of an object within a table

Below is an example of a basic table: table, th, td { border: 1px black solid; border-collapse: collapse; } <table> <tr> <th>number</th> <th>name</th> <th>id</th> </tr> <tr&g ...

javascripthtmlcsshtml-table

Showing and hiding nested Form Group validation in Angular 4 is a crucial feature that can improve

I have been exploring Angular 4 validation recently. Currently, I am working with a reactive form that contains two radio buttons and two form groups. The behavior I'm trying to achieve is when the user selects the first radio button, it removes valid ...

javascriptangularformsvalidationangular-forms

modify the name attribute of a select dropdown using jQuery dynamically

In my current project, I am working on dynamically changing the "name" attribute for each select box based on user interactions. The scenario is as follows: When a user clicks on an option in the first select box, a new select box appears with the remainin ...

javascriptphpjqueryhtmlcss

Implementing Icons in Custom Headers of AG Grid Using vue js

I am working on implementing a new feature in AG Grid where I want to display an info icon in the header along with a tooltip that appears when the icon is hovered over. I have already created a custom tooltip component that works correctly, but once I a ...

javascriptvue.jsvuejs2ag-gridag-grid-vue

Chrome does not support gradient, while Firefox does

When I attempt to utilize the webkit gradient tag specifically for Chrome, it fails to function altogether. On the other hand, when tested on Firefox using background:-moz-linear-gradient(#000, #888);, it operates smoothly. Despite this, applying backgrou ...

htmlcssfirefoxgoogle-chrome

`The challenge of properly handling quotation marks within quotation marks in JavaScript string literals

I am having trouble displaying text in a JavaScript tooltip Despite my efforts to escape the quotes and eliminate any line breaks, I keep encountering unterminated string literals. The specific text I want to show is: "No, we can't. This is going t ...

phpjavascriptstring