Ionic v4 concealing the radio button icon on Ion-radio component

I am looking to customize the style of the ionic radio component similar to the image shown in this link: https://i.sstatic.net/zjg3N.png

In Ionic 3, I was able to style ion-radio by overriding the CSS as shown below:

.radio-md .radio-icon{
    display: none;
}
.item-md{
    border: 1px solid color($colors,divider);
    border-radius: 6px;
}
.item-radio-checked{
    border: 1px solid color($colors,primary);
}

Now with Ionic 4, I'm unsure how to achieve the same custom styling for ion-radio components.

Does anyone know how to style ion-radio using Ionic v4?

cssionic-frameworkionic4

Answer №1

It's not possible to delete the radio icon, but you have the option to make its color transparent.

ion-radio{
--color:transparent;
--color-checked: transparent;

}

Answer №2

It’s not feasible to achieve this with Ionic 4.

Unlike the components in Ionic 3, those in Ionic 4 are constructed using Web components through Stencil.js. These components are specifically designed to withstand external CSS styles that may try to affect them. Some styling choices can be made using CSS 4 variables, which can be assigned externally for each component.

For example, when it comes to the ion-radio element, the available customization options are limited to color properties.

ion-radio{
    --color:#222
}

For more information, check outsetting Ionic variables.

Answer №3

To make it happen, simply set the width and height of ion-radio to 0.

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

When switching between tabs on Twitter Bootstrap, the page automatically scrolls to the top

I am encountering an issue with my tabs setup. Each tab has a different height and there is a Row on top of the tabs. You can see the problem in action on this JSFiddle. Whenever I switch from a tab with greater height to a tab with less height, the page ...

jqueryhtmlcsstwitter-bootstrap

When a jquery confirm dialog is displayed, the scroll bar mysteriously fades away

Whenever a jQuery confirm dialog is displayed, the scroll bar on the page disappears, causing the page to suddenly shift to the right. Here is the JavaScript code for the dialogue: <script src="vendor/jquery-confirm.min.js"></script> <link ...

jqueryhtmlcss

CSS <ul> <li> spacing issue in Internet Explorer 7

My CSS <ul> <li> nested menu is functioning perfectly in IE 8 and Firefox, but in IE7 it is creating a small gap between the elements. Here is my CSS: #nav, #nav ul { margin: 0; padding: 0; list-style-type: none; list-style-po ...

cssinternet-explorer-7internet-explorer-6

steps to embed an image in a button using asp

Hey everyone! Can anyone tell me the best way to insert an image into a button in asp.net? <asp:Button ID="Login" runat="server" Height="27px" OnClick="Login_Click" Text="Log In " Width="92px" EnableTheming="True" /> ...

c#asp.netcssstyles

Styling table cell borders using CSS

I am encountering some issues with the table below. Firstly, there seems to be errors in the HTML code that are being flagged. However, the main problem I am facing is that the left column is not receiving a complete border and I cannot determine the cause ...

htmlcsshtml-table

Adjust the width of CSS elements dynamically

Here are the shortcodes I am using on a page or post: [custom_width width='500' color='red'] [custom_width width='600' color='blue'] The purpose of these shortcodes is to display 2 buttons with different widths. H ...

phphtmlcss

Manipulating the max property within the ion-datetime component in Ionic 2/3 results in adjusting the default year to its maximum value

Exploring the functionality of ion-datetime in my Ionic 2/3 app, I encountered an issue with the datepicker component. While everything seems to be working fine overall, I am facing a specific problem related to setting max attributes on dates. Within my ...

angularionic-frameworkdatepickerionic2momentjs

Enable the children elements' before and after content to surpass the limitations set by the parent's overflow property

I have a division with the overflow property set to scroll to view all fields without using too much page space. Each field includes a title span and an associated input. Users can hover over the spans to see helpful tooltips. I use the spans' after a ...

javascriptjqueryhtmlcss

How can a div fill the remaining vertical space, despite the dynamic height of the div above it?

Check out my code snippet on JSFiddle: http://jsfiddle.net/nom4mxLt/ <div id="wrapper"> <div id="yellow">variable height (I put 200px but can change in realtime)</div> <div id="red">This one should fill all remaining space ...

css

Use CSS to style text when it falls on a "/" within a table

I currently have a table with a row that displays like this: word hi Someword/AnotherWord/LastWord My goal is to use CSS to break the text at the "/" symbol like this: hi<br>Someword<br>/AnotherWord<br>/LastWord However, the curr ...

htmlcss

Is there a way to integrate an After Effects animation onto my website?

Being a beginner in the world of coding, I am determined to learn by building my own personal website. However, I have encountered a challenge with after effects. I have designed an animation for the welcome screen of my website using my logo and a welcome ...

jqueryhtmlcssafter-effects

Colorful layers of nested divs

I need help changing the background-color of the parent div behind the children ones. I want it to be darker like in this image. Here's my HTML: <div class="main"> <div class="sub"> </div> </div> And here is my CSS: ...

csshtml

Why aren't the general sibling combinator & adjacent sibling combinator effective for selecting ul + li & tr + td elements?

I have recently started learning development, and I am practicing HTML & CSS by following tutorials on YouTube. In one of the tutorial videos, the instructor explained advanced selectors, including adjacent and general sibling combinators. For example: h ...

htmlcss

Is it considered a best practice in React to modify styles of elements using the className state?

I have a unique component that can showcase either an error message or a success message. These are the only two possible "states" it can be in, so the styling is limited to either of these options: for success: background-color: green; for error: backgro ...

javascriptcssreactjs

Struggling with using flexboxes and creating animated elements

Seeking assistance with animating the search bar on a website project. The animation is functioning, but the search input abruptly moves when the animation starts, as shown in this GIF: https://i.sstatic.net/17sFl.gif I am utilizing jQuery for the animat ...

javascriptjquerycssanimationflexbox

Highcharts: Show tooltip above all elements

Is there a way to configure tooltip display above all elements? I want to define specific coordinates so that the tooltip remains open even if it is covering the chart, and only closes when interacting with the top block. Screenshot 1 Screenshot 2 For e ...

javascriptcsshighcharts

Does the html label prevent propagation from occurring?

Can anyone explain why the toggle function is not being executed when clicking inside the box with the black border, but works when clicking outside of it (although not on the checkbox)? var checks = document.querySelectorAll("ul li"); for (var i = 0 ...

javascripthtmlcssdom-events

Is Firefox the only browser where the webpage is displayed off-center?

I've encountered a strange issue with my website that I can't seem to figure out. Despite searching extensively on Google and Stackoverflow, I haven't come across anyone else facing the same problem. During testing in different browsers lik ...

htmlcss

Using Selenium to verify if text appears in bold format or not

<div class="searchCenter largeFont"> <b> 1 </b> <a href="search/?p=2&q=move&mt=1"> 2 </a> <a href="search/?p=3&q=move&mt=1"> 3 </a> <a href="search/?p=4&q=move&mt=1"> 4 </a> < ...

cssselenium

CSS - Image not adapting to screen size

If you take a look at the website www.markallanholley.com, you will notice that the robot-girl image on the right is not responsive. I have tried coding what I thought was the correct way to make it responsive, but unfortunately, it's not working. I w ...

htmlcss