What's the reason behind the :read-only CSS pseudo-class being activated for this particular checkbox?

I am encountering an issue with the SCSS code below:

input[type="checkbox"] {
    ...
    &:read-only, &[readonly] {
        cursor: default;
        filter: grayscale(1);
    }
}

This is being applied to 

<input type="checkbox" id="checkbox" onChange={this.rememberMe} />

Despite following the guidelines on MDN: :read-only, which states:

it will select any element that cannot be edited by the user.

Why is this style being applied to my editable input?

This issue persists across both Firefox and Chrome browsers.

https://i.sstatic.net/eyOqf.png

htmlcssreactjssassjsx

Answer №1

  • One reason why checkboxes and radio buttons (along with most other elements) are inherently read-only is because when you interact with them, you are changing their checked state, not their value.
  • This might seem counter-intuitive, but applying the input readonly attribute to a radio or checkbox serves no useful purpose.

As a result...

  1. Avoid using the input readonly attribute on checkboxes or radios as it won't have any meaningful impact.
  2. Instead of using the :read-only pseudo-class in CSS to target input elements with the input readonly attribute set, opt for the input[readonly] attribute selector.

The WHATWG HTML specification highlights that the :read-only pseudo-class matches all HTML elements except certain user-alterable ones like inputs and textareas.

To create a "read-only checkbox/radio," consider options like using disabled attributes rather than relying on ineffective methods.

Improving Accessibility

  • It's crucial to avoid restricting user interaction by only styling known input types explicitly.
  • By defining styles for specific input types, such as text, password, date, and others, you ensure consistent rendering across browsers and future-proof your design.
  • When targeting future input types, be selective in your approach to avoid unintended consequences.

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

Leveraging .Net ConfigurationManager.AppSettings in Cascading Style Sheets

I am facing an issue where I have a specific color key in my AppSettings for the company's brand color, which needs to be applied to a CSS class. The challenge is how to incorporate this key into my stylesheet. Is there a way to access the Configurati ...

c#cssasp.net-mvc

Positioning html images to overlap each other without losing the ability to click

Currently, I am facing a challenge with positioning two images over each other. The back image should be at the bottom, while the center image needs to be on top of it. Additionally, there is a requirement for placing a random link (in this case google.com ...

javascripthtmlcsspositioncss-position

What steps can be taken to stop Internet Explorer from interfering with a hover trigger on a child element?

I'm encountering an issue with my HTML and CSS code that seems to work perfectly in all browsers except for IE10 and below. The problem arises on a user profile page where there is a profile picture (avatar). When hovering over the avatar, the CSS tr ...

htmlcssinternet-explorerbrowser

Why isn't the sticky element moving up along with its sibling element when scrolling?

This is an additional query related to my previous question How can I make an element sticky but scrollable to its full (variable) height with a sibling element? The issue at hand is that the right sidebar does scroll to its full available content and th ...

htmlcss

What are some strategies for implementing TDD when the functionality and implementation of the code are unclear?

I must ask for your understanding if my query seems peculiar or if the answer is evident. Despite months of searching online, I have yet to find a suitable response to my dilemma. For more than a year, I have been engaging in test-driven development, focu ...

reactjsunit-testingtdd

Navigation item is centrally aligned

UPDATE: After successfully targeting the necessary code to implement the changes I require, my next challenge is figuring out how to only make a specific section of this div transparent. For instance, in a scenario where the nav bar is 750 pixels wide, I ...

csswordpressuinavigationbar

Tips for causing a column to move to the following line once it exceeds the width of the div

My menu is exceeding the boundaries of its container. How can I make sure the overflowing content moves to a new line while staying within the parent element? Check out an example here Here is the structure of my HTML: <div class="product-menu" style ...

htmlcssflexbox

To create a dynamic and adaptable layout, consider utilizing JavaScript or jQuery to incorporate a flexible

Imagine needing to dynamically include CSS rules that correspond to a specific media condition. Take, for instance, the scenario below: @media only screen and (min-device-width : 500px){ .someClass: { color: blue; } } An obvious solution ...

javascriptjquerycssresponsive-designmedia-queries

Datatables failing to display Bootstrap buttons

I'm having trouble styling the export buttons in datatables with bootstrap. When I add btn btn-primary, it only adds a blue border to the button. How can I make it look like a proper bootstrap primary button? Additionally, I'd like to add some p ...

javascriptjquerycssdatatablebootstrap-4

Modifying the appearance of a marquee tag with JavaScript: A step-by-step guide

I am trying to change the height of a marquee tag depending on a calculation using javascript. I have tried this: /*jslint devel: true */ function maths() { "use strict"; var x = Math.floor((Math.random() * 1080) + 1); document.getElement ...

javascripthtmlcss

I need help with formatting a div to look like this

Looking to simplify my page by reducing the number of divs, wondering if this "tile" could be achieved without using one. Here's the example I have in mind: <a href="mks.html" class="big-tile big-tile-1"> <h1>town<br> libra ...

htmlcss

Utilize react-three-fiber and useSpring to sequentially execute two distinctive animations on a singular element

Hey there! I'm relatively new to three fiber and react springs, and I've encountered a small issue... I'm attempting to add animation to my cube using onClick to make it move up and then to the right, similar to this: visual explanation her ...

reactjsthree.jsreact-springreact-three-fiber

Having trouble with the redirection of my Django registration page

I have encountered an issue while creating a registration page for my Django project. The problem arises when I compile the registration form as it is trying to navigate to a path where it repeats 'users/register'. Instead of going to 'local ...

pythonhtmldjangobackend

Encountered a MongoDB connection issue during deployment on ZEIT platform

Hey there! I'm a newcomer to React and I've been working on deploying my app on Zeit. Everything seems to be going smoothly, except for one issue that has popped up on Zeit regarding the error: /usr/src/app/bundle/programs/server/node_modules/ ...

mongodbreactjsmeteorgraphqlvercel

Can you explain the distinction between including a space between px measurements?

Can you spot the disparity between the following two CSS properties? border-right: 1px dotted #CCCCCC; Versus: border-right: 1 px dotted #CCCCCC; Is there a distinction between the two? Is the second example incorrect? Should the number be directly ne ...

css

Is there a table that allows users to input percentages?

Looking for help with a table that has 2 columns: "Activities" and "Average % of Time". Users need to input a % value for each activity in the "Average % of Time" column. There are 7 rows for activities. The goal is to ensure that the sum of the % values f ...

javascripthtml

Issue encountered with fetching Contentful data using parameters in Next JS

Using the params obtained from getStaticPaths to fetch data from Contentful is my goal. However, I am encountering an issue with retrieving the correct params and as a result, getting incorrect data. The argument 'string' cannot be assigned to ...

reactjsnext.jscontentful

JQuery along with Font Awesome: Setting the default value for star rating

The Situation: I am currently working on a system where users can rate various products using Laravel. Each product has an average rating which is then used to display stars. These ratings are shown on the "Product Listing" page, which contains multiple p ...

jqueryhtmlcssfont-awesome

Using React, update the checkbox so that it dynamically changes from checked to unchecked

Hey there, I'm currently working on a table that includes checkboxes. The idea is that when I click on "Add Entries", a modal opens up; and when I click on "Done", I want the checkboxes to become unchecked without having to refresh the page. Do you ha ...

javascriptreactjs

Switch the style of the anchor tag using JavaScript

I need assistance with modifying a list on my webpage. Here is the current structure: <ul id="breadcrumbs" class="breadcrumbs-two"> <li><a href="#" class="current" id="a1">Step1</a></li> <li><a href ...

javascriptjqueryasp.netcss