Can the color of an ion-radio be adjusted when it is not selected?

I am experiencing an issue where I need to change the default color (grey) to a specific color of my choice, such as the primary color.

I have attempted the following methods:

<ion-col sizeXs="12" sizeMd="6" class="radio-box">
    <ion-item lines="none" class="radio-item>
        <ion-radio color="primary" mode="md" value="Lorem"></ion-radio>
        <ion-label>Lorem</ion-label>
    </ion-item>
</ion-col>

Another way I tried is using CSS:

.radio-box {
    padding: 0 16px;
    margin: 8px 0;
    .radio-item {
        border: 1px solid #0064D9;
        border-radius: 5px;
        ion-radio:host{
            color: #0064D9!important;
        }
    }
}

Here is a visual representation in case it helps

javascriptjqueryhtmlcssionic-framework

Answer №1

If you're working with Ionic 4+, take advantage of the --color custom property:

ion-radio {
  --color: #0064D9;
}

For Ionic 3, adjust the border-color:

.radio-box ion-radio.radio-md .radio-icon {
  border-color: #0064D9;
}

Answer №2

<ion-col sizeXs="12" sizeMd="6" class="radio-box">
    <ion-item lines="none" class="radio-item">
        <ion-radio [color]="setMyColor" mode="md" (ionSelect)="toggleColor()" value="Lorem"></ion-radio>
        <ion-label>Lorem</ion-label>
    </ion-item>
</ion-col>

Within the component's code, we have:

setMyColor: string = '#0064D9';

And within a function in the component, we have:

toggleColor() {
    this.setMyColor = 'primary';
}

Answer №3

To adjust the styling of radio items in SCSS, simply target the following selectors:

.default .radio-item {
 // customize the background color here
}

.default .radio-icon {
 // set a default color for the radio tick icon
}

For additional modifications, you can utilize the following code:

.selected .radio-icon {
 // specify the color for the selected radio tick icon
}

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

Angular JS encountered an issue with executing 'removeChild' on 'Node' for HTMLScriptElement.callback, leading to an uncaught DOMException

I am currently using Angular's JSON HTTP call. When making a post request, I experience an error during runtime: Uncaught TypeError: Cannot read property 'parentElement' of undefined at checklistFunc (masterlowerlibs.67785a6….js:42972 ...

javascriptangularjsangularjs-directiveangularjs-scope

Guide to implementing function callbacks in Nodejs using xml2js

In my Node.js project, I am utilizing xml2js to parse XML documents. Since the XML files I need are stored remotely, I make use of a Node.js http request to fetch the XML data and then perform parsing with xml2js in the following manner: var parser = new ...

javascriptnode.jscallback

Identifying identical web elements using Python Selenium through related attributes

Having attempted to solve this problem for the third time, I find myself unable to come to a final solution on my own. I would greatly appreciate it if someone could offer their insights on the issue at hand. Let's consider the following HTML structu ...

pythonhtmlpython-3.xseleniumxpath

The Ruby on Rails application is having trouble detecting the stylesheet in the assets

I'm having some trouble displaying a border on my buttons. The button styles are defined in the app/assets/stylesheets/modules/_buttons.scss file, which I have imported into application.scss. @import "bootstrap-sprockets"; @import "bootstrap"; //m ...

cssruby-on-railstwitter-bootstrap

What are the best techniques for creating animations in AngularJS?

I've been trying to figure out how to animate in AngularJS by searching online, but I haven't found a perfect solution yet. html <span class="sb-arrow down" ng-click="hideSampleList($event)"></span> ...

javascriptangularjsanimationjquery-animatecss-animations

An issue occurred while attempting to differentiate the '[object Object]'. Angular-11 Application only accepts arrays and iterables for this operation

When using *ngFor, I am facing an issue with fetching data from my component.ts to my component.html Interestingly, the same method works for one class but not for another. Let's take a look at my service class: export class FoodListService { priv ...

javascriptangulartypescriptrxjsangular-ui-router

Tips for monitoring every click on a page within an ionic mobile application

I've created a basic webpage with checkboxes that users can toggle on and off multiple times. How can I keep track of all these checkbox events? Here is the code I'm currently working with. app.js var pmApp = angular.module('pmApp', ...

angularjscordovaionic-frameworkangularjs-directive

The Requirejs Optimizer is failing to compile

Struggling with getting the optimization tool to work while using requirejs. My aim is simple: optimize my javascript files into one script file with all dependencies included. All my files reside in the js/ folder, including a subfolder named vendors/ M ...

javascriptoptimizationrequirejsr.jsjs-amd

When using @testing-library/react (rtl), the 'waitFor' function achieves success even without the need for the 'await' keyword

waitFor() is causing my test to fail while waitFor() (without await) makes it pass. The official documentation states: Async methods return a Promise, so you must always use await or .then(done) when calling them. (https://testing-library.com/docs/guide ...

javascriptreactjstypescriptreact-testing-library

Observing nested objects in Vue while utilizing deep watching功能

Is there a way to determine which property change in the object triggered the watch call while watching a data object with multiple properties using deep invocation? data(){ return { user:{ first_name:'', last_na ...

javascriptvue.js

Tips for concealing the angular component depending on a specific circumstance

I have developed a custom directive for validating input. It is designed to check the length of the input. If the length is zero, an error message will be displayed. However, I am facing difficulty in hiding the error message when the input is filled with ...

javascriptangularjsangularjs-directive

The transmission of ContentType is unsuccessful

I'm having an issue with the code in my app. It seems that the content-type is not being sent. Is there a way to force it to be sent? $.ajax({ crossDomain: true, type: ...

javascriptajaxjsoncordovajquery-mobile

Having trouble with your GitHub Pages site displaying properly on desktop but working fine on mobile?

I am facing an issue with my GitHub pages site on a custom domain. It works perfectly fine on mobile, but when I try to access the same URL from desktop, I encounter a DNS_PROBE_FINISHED_NXDOMAIN error. Any suggestions on why this might be happening? You c ...

htmlcssgithubgithub-pages

Error message: React router issue (Prop type failure: Prop `children` supplied to `Switch` is invalid, expecting a ReactNode.)

Trying to modify a component in order to create a login page, I attempted to modify App.js but encountered an error. warning.js?6327:36 Warning: Failed prop type: Invalid prop children supplied to Switch, expected a ReactNode. This is the code I have ...

javascriptreactjsrouter

Is it possible to create a popup window that remains fixed at the top edge of the screen but scrolls along with the rest of the page if

In an attempt to organize my thoughts, I am facing a challenge with a search page similar to Google. The search results trigger a popup window when hovering over an icon, located to the right of the search results. Here is what I am looking to achieve with ...

javascriptcssajaxscrollpopup

Tips for delivering a heartfelt message when a user adds an item

import React from 'react'; import { useForm } from "react-hook-form"; import { toast } from 'react-toastify'; const AddStorage = () => { const { register, handleSubmit } = useForm(); const submitData = data => ...

javascriptreactjsreact-hooksreact-toastify

Struggles with closing dropdown menus

How can I modify my drop down menu so that the first drop box closes when a new link is clicked? Additionally, how do I ensure that the menu closes when clicking on a child item without refreshing the page (since the content is dynamically pulled from a ...

jquerycss

Is the state variable not being properly set by using React's setState within the useCallback() hook?

Within a React FunctionComponent, I have code that follows this pattern: const MyComponent: React.FunctionComponent<ISomeInterface> = ({ someArray, someFunction }) => { const [someStateObjVar, setSomeStateObjVar] = React.useState({}); const [ ...

javascriptreactjstypescriptusecallback

How can I retrieve the ultimate value of a JQuery UI Slider and store it in a PHP variable?

I am looking to add 2 JQ UI Sliders to a single page on my PHP website. I need to capture the final values from both sliders (the last value when the user stops sliding) and store them in PHP variables for multiplication. How can I accomplish this task? I ...

javascriptphpjqueryvariablesslider

Image not aligning to center - email

Struggling to center align an image at the top of an email due to code that hides it when the browser is larger than 520px. Is there a way to exempt this specific image and keep it centered? .mobile { display: none !important; font-size 0 !importa ...

htmlcssemail