Is it possible to modify the inactive color of just one radio button in Framework7?

Is there a way to change the inactive color of only one radio button in Framework7? I am aware that using the CSS variable --f7-radio-inactive-color allows me to set the inactive color for all radio buttons.

However, I specifically want to modify the inactive color for just one radio button (the currently selected one). My attempt to achieve this through CSS variables by targeting input:checked[name=color-radio] did not yield the desired result.

If you are interested in experimenting with my simple example, feel free to access it here on JSFiddle.

Answer №1

It seems that CSS variables do not have scope awareness, so setting them outside of the :root won't make a difference.

However, you can manually assign colors to specific elements like <i> and it will work as expected. Just remember to reset all <i> elements before applying new styles.

Check out this example: https://jsfiddle.net/r0jkq2o7/2/

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

Performing String formatting in JavaScript using an array

I've been utilizing the stringformat library to format strings in my node.js applications. var stringFormat = require('stringformat'); stringFormat.extendString(); In my current project, I'm attempting to pass an array of parameters a ...

What is the recommended way to adjust the width of a paper-textarea element in Polymer 1.0?

Is there a way to adjust the width of a paper-textarea? I have tried using CSS selectors within Polymer 1.0 style tags, but it does not seem to be effective. The paper-textarea element is made up of paper-input-container. I attempted the following approach ...

Integrating fresh fonts into TinyMCE's font selection choices

I recently reviewed a thread regarding Google Fonts and TinyMCE, and I have successfully added new fonts to TinyMCE in the past. However, I am currently facing an issue where I am unable to add a new font called "Samman" that I obtained from MyFonts.com. ...

Hide Address with Jquery Dialog Box

How can I securely redirect a user to another page within the same website? In my specific situation, I have a form where users input information. For cancellations, they should have options available. When a user clicks the cancellation button, a dialog ...

Conceal / reveal minuscule letters

Is it feasible to hide or select only the lowercase characters of a string using CSS? <p>Richard Parnaby-King</p> How can I display just RPK? While ::first-letter allows me to show the letter R, is there a way to go further with this? p ...

breaking down ajax json responses

I am attempting to extract specific data from a JSON response provided by a web service using the code below. function getADData() { var strSearch = $('#txtSearch').val() var ajaxData = "{ 'PartNameString': &apo ...

onsubmit function was never triggered

Seems like a silly mistake, but I'm encountering an issue with my HTML form. Here's a snippet of the code: <form onsubmit="updateProfile();"> <input type="submit" value="Update Account"> .. ... </form> However, w ...

A checkbox placed within an anchor tag

Here is some code that I have: <a href class="dropdown-toggle"> <input type="checkbox" ng-model="test.checked"> <span class="fa fa-angle-down"></span> </a> When I click on the above code, I want the chec ...

Tips for displaying autocomplete suggestions as clickable links?

I am new to using Ajax and trying to figure out how to display autocomplete results as clickable links. I have managed to list the related results, but I am struggling to add the links. I believe the links need to be added within the script as an HTML tag. ...

Perform an Ajax call just one time

$('#addToCart').click(function () { let csrf = $("input[name=csrfmiddlewaretoken]").val(); let trTable = $(this).parents('div')[1]; let customPrice = $($(trTable).children('div') ...

Can you explain the purpose of this script? Is it considered harmful?

Today, I received a suspicious phishing email containing the following JavaScript code: <script type="text/javascript" language="Javascript1.1"> <!-- Begin var bCancel = false; function validateRegistrationDetails(form) { hm ...

Additional list item being generated using jQuery's .append() method

When adding a JSON response to an HTML element, the process is quite straightforward. Below is an example of the HTML code: <div> <ul id='grid'></ul> </div> And here is how it can be achieved using jQuery: data = ["P ...

The error message "TypeError: defineCall is not a function. require() fails" indicates that

Upon joining a new project, I encountered an issue with the database model built using Sequelize. It seems that I am unable to import more than a few files using sequelize.import before running into a TypeError: defineCall is not a function. The problem ap ...

Encrypting data between two Node.js servers

I am looking to create a Node.js daemon that can operate across multiple computers while facilitating message exchange between the daemons. Security is paramount, so I want to ensure the communication is encrypted. However, I am uncertain about which encry ...

When CSS animations are used on numerous elements, it can lead to variations in the speed of

I made an animation to move elements from the top to the bottom of a page. I have 4 objects with this animation applied, but for some reason, they are moving at different speeds. It's confusing me. What could be causing this inconsistency? body { ...

Is there a way to designate whether the <ul> element is displayed horizontally or vertically?

For example: <ul> <li>a</li> <li>b</li> </ul> The default output is: ab But I am looking for: a b Is there a way to achieve this? ...

Exploring the transparency of material lab autocomplete drop-down text for enabling multiple selections

Check out this demo for checkboxes and tags in Material UI The code below demonstrates an autocomplete component that functions correctly. However, the drop-down text appears transparent. Is there a way to fix this issue without modifying any libraries? ...

Verify if a fresh message has been added using AJAX

Is it possible to create a notification system similar to Facebook, where the tab title displays the number of new messages without refreshing the entire page? Below is a snippet of code from my website's message box feature that I am working on. < ...

JQuery organizing and arranging list with drag and drop functionality

Hey there, I've encountered a little dilemma. I've developed a drag and drop list feature in my WordPress plugin that allows users to rearrange categories. For the most part, it's working smoothly... The table is being populated from a MySQ ...

Utilizing interpolation in Angular to apply CSS styling to specific sections of a TypeScript variable

Suppose I have a variable called data in the app.component.ts file of type :string. In the app.component.html file, I am displaying the value of data on the UI using string interpolation like {{data}}. My question is, how can I apply some css to specific ...