The CSS selector for radio input does not match when checked in IE7

I've been attempting to add a style to the label for a radio button with the CHECKED attribute, but so far all my attempts have failed to match on IE7.

For example, I have created a JSFiddle here: JSFiddle.

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <style type="text/css">
            /* Ensuring that + selectors work */
            input + span { color: blue; }

            /* Attempting [checked] alone */
            input[checked] + span { color: red; }

            /* Trying to select by value */
            input[checked="checked"] + span { color: green; }
        </style>
    </head>
    <body>
        <form>
            <input type="radio" checked="checked" name="x" /><span>One</span>
            <input type="radio" name="x" /><span>Two</span>
            <input type="radio" name="x" /><span>Three</span>
        </form>
    </body>
</html>

All text in the SPAN elements is blue, however, the first one does not turn red or green in IE7 (both native and emulated in IE11). Should I resort to JavaScript workarounds, or is there a CSS trick that could make this function properly?

Answer №1

It's interesting to note that IE7 does support attribute selectors, at least the basic ones. However, there seems to be a specific issue with the checked attribute. If you change the checked attribute to any other attribute name (valid or not), the selector works. Simply deleting the 'ed' to make it 'check' allows both the existence and equality selector to work. This behavior might be related to IE7 not setting the defaultChecked DOM attribute when the document is parsed.

Internet Explorer 8 and later: In IE8 mode, parsing operations on the checked content attribute always affect both the checked content attribute and defaultChecked DOM attribute. For instance, removeAttribute('checked') sets both checked and defaultChecked to false. Similarly, setAttribute('checked', 'checked') sets both DOM attributes to true (as if the element was being re-parsed).

Source: https://msdn.microsoft.com/en-us/library/ie/ms533715(v=vs.85).aspx

If you need to cater to a larger demand (many elements), consider using Selectivizr - selectively loaded for IE6-IE8:

<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="libs/selectivizr.js"></script>
<![endif]-->

If you only have one or two instances, a jQuery (or vanilla JavaScript) event handler can be utilized. Although this method is unconventional for me, as my usual approaches don't function in IE7; this was the sole approach that worked in IE7:

$('input[name="x"]').on('change', function(){
    $('input[name="x"]').siblings('span').removeClass('red');
    $(this).next('span').addClass('red');
});

CSS:

.red{
    color:red;
}

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

Trouble Ensues as CSS Div Refuses to Center

I'm in the process of creating a practice website to improve my HTML and CSS skills, but I'm having trouble centering a specific div. I've attempted to use margin: 0 auto, but it doesn't seem to affect the positioning of the div at all. ...

Adapting CSS according to input selection

Forgive me for asking what may seem like a simple question. I am currently using the CSS code below to modify the background color of a label when its associated checkbox is checked: #project input[id="button1"]:checked + label {background-color:red;} Is ...

Alert: The specified task "taskname" could not be located. To proceed with running grunt, consider using the --force option

My current task involves converting .css files to .sass files using the 'grunt-sass-convert' npm module. Here is the configuration in my 'Gruntfile.js': 'use strict'; module.exports = function(grunt){ grunt.loadNpmTasks( ...

How can you utilize CSS grid to position an alternate symbol alongside ordinary text?

Does anyone have suggestions on how to align an "alt symbol" with "regular text"? I'm struggling to center both elements without resorting to hacky solutions. Currently, I am using CSS grid, but I am open to exploring other solutions that are easy an ...

CSS is being affected by an HTML form's unintended margin

Something seems off with the alignment of my search bar. It's causing the horizontal line to shift down when I add it next to the vertical lines at the bottom. I've tried adjusting the padding, margins, and even played with positive and negative ...

My React project is unable to import the foundation SCSS file into the App.scss file

After installing zurb-foundation using npm, I attempted to import the .scss file into my App.scss file. Utilizing the "live sass server" for compiling the .scss code into .css code, a .css file was generated but did not display any code despite successfull ...

When you apply margins in CSS and HTML, it can cause elements to break out of the row alignment

I'm struggling with my html code that contains elements arranged in rows: <div class = "row"> <div class="col-sm-3 cont-box"> <h1>Title1<h1> </div> <div class="col-sm9 cont-box"> <img src="onepic.jpeg" class=" ...

Ensure that all divs have the same height and padding when resizing

I have 3 divs nested within a parent div. My goal is to dynamically set the height of all the child divs to match the height of the div with the maximum height, even when the screen resizes due to responsiveness. Below is my HTML structure: <div class ...

Tips for positioning an advertisement at the center of a full-screen HTML5 game

I am struggling to find a way to perfectly center my advertisement in a fullscreen HTML5 game. The game automatically expands to fullscreen when played, and I want the advertisement to always be positioned in the center, regardless of whether the game is b ...

What is causing the qtip tooltip to show up on buttons with different ids?

I have a requirement to display tooltips only for specific buttons and not for others. I am facing an issue where the tooltip intended for the TAB button is showing up when hovering over other buttons like FOO and BAR as well. Could this be due to them sha ...

Here's a unique version: "A guide on using jQuery to dynamically adjust the background color of table

I need some assistance with changing the background color of td elements based on the th class. Specifically, I want to target all td elements under the bots class in the HTML code provided below. <table border="1" class="CSSTableGenerator" id="myTab ...

The previous method of using `vue/compiler-sfc ::v-deep` as a combinator has been phased out. Instead, opt for the new syntax `:deep(<

When developing with Nuxt 2, I am encountering numerous [@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead. errors when running npm run dev. After attempting to resolve the issue by changing a ...

Discover captivating visuals that effortlessly occupy the entire breadth, while gracefully encompassing a mere quarter of the total vertical space on the

It's become quite challenging for me to locate images that can occupy the entire width of a page while maintaining just 25% of the page height. Whenever I make adjustments to the image's CSS, it ends up appearing distorted because its width is di ...

Adding the header.php file in WordPress caused the style.css to stop working

Whenever I include a basic "header.php" file in my theme directory, my style.css mysteriously stops working. But when I remove the "header.php" file, everything goes back to normal. How can I troubleshoot this issue? Below is the code snippet from my fil ...

The HTML code does not seem to be acknowledging the CakePHP link

When using Cakephp to generate a link with Html->link, the code looks like this: echo $this->Html->link('Download',array( 'plugin'=> 'galleries', 'controller'=> 'galleries', 'a ...

Choosing and adding a div to another using the select method

Can someone assist me with this task? My goal is to dynamically append a div when selecting an option from a dropdown, and hide the div when the same option is selected again. Additionally, I want the name of the selected option to be displayed on the left ...

Flameflare/Console-inspired hover animation

Curious if there is a creative solution to this problem that I haven't thought of yet... I'm working on a site editor tool and it would be incredibly useful to have the ability to highlight elements when hovering over their code in the html/elem ...

Is there a solution for the issue where the :after pseudo-element on a TD in IE9 does not accurately reflect the TD height?

In the design I'm currently working on, there is a requirement for a border around a table row. Due to certain complications, using the border property directly is not an option. In trying to find a solution, I have experimented with two different app ...

"After completing the survey form, the User Details form is displayed upon clicking the submit button

In my Quiz, each question loads on a separate page with clickable options. Some questions may have multiple answers, including an "Others" option. At the end of the quiz, users need to fill out a form. Although I've created a survey form, I'm fa ...

Styling the text of segmented bars in ControlsFX using CSS

Is there a way to customize the size and color of the text for the ControlsFX segmented bar? I've attempted the typical method: -fx-font-size: 15px Unfortunately, it doesn't seem to be effective. Whether it's through CSS or code, I'm ...