The CSS property :read-only is used on elements that do not have the readonly attribute

Could someone please clarify why the CSS pseudo class :read-only is being added to elements that are not actually readonly?

To see an example, check out this link

I have tested this in recent versions of Edge, Chrome, and Firefox. All of them apply the input:read-only style to 

<input type="button" />

According to W3Schools:

The :read-only selector targets elements that are technically "readonly". Form elements with a "readonly" attribute are considered as such.

On the other hand, MDN explains:

If an input has the readonly attribute, it will also be affected by the :read-only pseudo-class. Inputs that support the readonly attribute but do not have it set match the :read-write pseudo-class instead.

htmlcss

Answer №1

According to the guidelines provided in the specification:

An element is considered to match the :read-write criteria if it can be altered by the user, based on the rules specified by the document language. In case this condition is not met, the element falls under the category of :read-only.

Since buttons do not fall into the category of user-alterable elements, they are classified as :read-only.

Answer №2

Encountered a similar issue involving an input of type "checkbox". The read-only selector was even applying to those without the "readonly" attribute.

This resulted in selecting inputs that were not set as readonly.

element:read-only{
   #code
}

To resolve this, I used the following code:

input[readonly]{
   #code
}

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

Instructions for instructing Codeception to finalize the selection from a dropdown list without the need to click on a submit button

I am facing an issue where I am able to select an element from a drop down list in codeception, but it is not being displayed as selected in the box. I believe the select operation is not completing properly. Since there is no submit button available, I at ...

htmldrop-down-menuwebdrivercodeception

CSS box spacing is the key factor in creating clear layouts and

Having these 3 boxes is causing some spacing issues that I need to address. Whenever I try to add margin, the third box shifts to the next row. Below is the snippet of code: CSS: #hotels { background: url('../img/PICS/19427110_ml.jpg'); ...

htmlcsstwitter-bootstrap

Evolution of the material through a fresh new slide

Can someone assist me with an animation issue? I have a slideshow consisting of 4 images that are supposed to transition automatically after a set time interval. Upon initially loading the webpage, the animation works perfectly as intended. However, subs ...

javascripthtmlcss

Ways to generate multiple choices for options

Is there a method to provide multiple options within an option? I am utilizing CSelect to create options. One of the options needs to include additional options. <CSelect custom name="select_pattern_filter" id="select_pattern_filter" ...

htmlreactjs

PHP pagination restricts the amount of data shown on a page without carrying over to the next page

Welcome to my PHP website! It's designed to showcase data from a database with a simple search feature on the homepage. When a user searches for a keyword, they are directed to a page displaying the relevant data. Below is the code I've implement ...

phphtmlmysqlsql

Styling the CSS to give each grid element a unique height

I am working on a grid layout with three columns where the height adjusts to accommodate all text content. .main .contentWrapper { height:60%; margin-top:5%; display:grid; grid-template-columns:1fr 1fr 1fr; grid-gap:10px; /*grid-te ...

htmlcssalignmentcss-grid

How to perfectly align a modal box in the center

Hey everyone, I could really use some help. I'm struggling to find the right formula to center this modal (http://www.queness.com/post/77/simple-jquery-modal-window-tutorial) on my browser, which has a size of 1263X582. I've been trying to use th ...

jquerycssjavascriptcentermodalpopupextender

Sentence following the original passage

I want to achieve a similar look as the example below: Here is what I have done so far: h2:after { content: ""; display: inline-block; height: 0.5em; vertical-align: bottom; width: 48px; margin-right: -100%; margin-left: 10px; border-bo ...

htmlcss

Unable to generate new entries with HTML Form

I've been working on creating a simple form with the ability to add new seasons or entries that will be posted to a database, but I've hit a roadblock. Whenever I try to run it, the "Add more Episodes" buttons for new seasons don't seem to w ...

javascriptphphtmlmysql

Modifying paragraph content with JavaScript based on selected radio button values and troubleshooting the onclick event not triggering

I am working on implementing a language selection feature on my website where users can choose between English and Spanish. The idea is to have two radio buttons, one for each language, and a button. When the button is clicked, the text of the paragraphs s ...

javascripthtmlbuttononclick

Creating a top-notch design with a standard app vibe (Material Design)

For the past year, I have been using Cordova to create apps by converting HTML, JavaScript, and CSS code into .apk files. However, I have struggled to achieve the same level of professionalism and "normal" feel that popular Android apps like WhatsApp posse ...

javascriptandroidhtmlcordovamaterial-design

Ways to send data to a popup in svelte

Hey there, I could really use some assistance with my Svelte app. I'm trying to implement a modal and pass a parameter to the modal component in order to customize its content. However, when using the open() function of Modal, we only need to provide ...

javascripthtmlcssmodal-dialogsvelte

Is there a way to make my red div switch its background color from red to green when I press the swap button?

How can I make the red div change its background color to toggle between red and green when I click on the swap button in the following code? $(document).ready(onReady); var numberOfClicks = 0; function onReady() { console.log('inside on ready ...

javascriptjqueryhtmlcss

What could be causing the header of the datatable to be out of alignment with the rest of

I'm facing an issue with my datatable where the header is misaligned with the content. Can someone please assist me in adjusting the header and content so that they are parallel? It doesn't look right at the moment. <div style="margin-top:1 ...

javascriptjqueryhtmlcss

Unlock the potential of HTML5 Datalist: A comprehensive guide on integrating it with

The latest version of HTML, HTML5, has introduced a new tag called datalist. This tag, when connected to <input list="datalistID">, allows for autocomplete functionality on web forms. Now the question arises - what is the most efficient approach to ...

javascriptphpmysqlhtmlhtml-datalist

AngularJS form submission with Ajax requiring a double click to successfully submit the form

I need to perform the following activities on my HTML page: User inputs email and password for registration Form is sent to Controller when user clicks Submit Controller uses AJAX to create JSON request to RESTful Server and receives response from server ...

javascriptjqueryhtmlangularjsajax

Selecting options using AngularJS to parse through a list

I am faced with a challenge involving a collection of strings representing years. Here is an example: $scope.years = ["2001", "2002", "2003", ...]; My goal is to display these values in a select tag within a web page. However, whenever I attempt this usi ...

javascripthtmlangularjsrepeat

Why is my md-button in Angular Material displaying as full-width?

Just a quick question, I created a simple page to experiment with Angular Material. On medium-sized devices, there is a button that toggles the side navigation, but for some reason, it expands to full width. There's no CSS or Material directives causi ...

javascriptcssangularjsmaterial-designangular-material

What are your strategies for designing a website specifically for mobile users?

Today, most modern smartphones come with 720p or 1080p resolution screens. This means that even on smaller screens, like a 4-inch display on a Galaxy s3, we can still view all the text and GUI elements (such as email textboxes) on a website when we first o ...

htmlcssmobile

JavaScript is proving to be uncooperative in allowing me to modify the

Despite searching through previously asked questions, I have been unable to find a solution to my issue. I am struggling with changing an image source upon clicking the image itself. The following is a snippet of my HTML code: <img id="picture1" oncli ...

javascripthtml