How to make color for checked QRadioButton but looks like standard?

Question

I know many people asked this question. I also searched it here already. One of easiest solutions is with stylesheet:

QRadioButton {
background-color: rgb(252,254,252);
color: black;
}

QRadioButton::indicator {
width: 11px;
height: 11px;
border-radius: 5px;
}

QRadioButton::indicator::unchecked{ 
border: 1px solid; 
border-color: rgb(132,132,132);
border-radius: 5px;
background-color: white; 
width: 11px; 
height: 11px; 
}

QRadioButton::indicator::checked{ 
border: 3px solid; 
border-color: white;
border-radius: 6px;
background-color: rgb(0,116,188); 
width: 7px; 
height: 7px; 
}

But if I do this way, the result looks like this (The button has only white-round border and blue-round inside). However, can we make the black border outside of them like standard checked radio button ? (black-border->white-border->blue round). Can we do it in Qt?

score 10 · Accepted Answer · answered Nov 18 '16 at 19:23

Forget about trying to style checkboxes or radio buttons that way in Qt -- it's a nightmare and you will never really get the results you want. The best way to do this in Qt is to make individual image files for each button state, like in the Style Sheet Examples:

QRadioButton::indicator
{
    width: 13px;
    height: 13px;
}

QRadioButton::indicator::unchecked
{
   image: url(:/images/radiobutton_unchecked.png);
}

QRadioButton::indicator:unchecked:hover
{
    image: url(:/images/radiobutton_unchecked_hover.png);
}

QRadioButton::indicator:unchecked:pressed
{
    image: url(:/images/radiobutton_unchecked_pressed.png);
}

QRadioButton::indicator::checked 
{
    image: url(:/images/radiobutton_checked.png);
}

QRadioButton::indicator:checked:hover 
{
    image: url(:/images/radiobutton_checked_hover.png);
}

QRadioButton::indicator:checked:pressed 
{
    image: url(:/images/radiobutton_checked_pressed.png);
}

well, I did not think about this solution. That was great. Thank you and voted! Have a nice day! :) — gnase, Nov 21 '16 at 15:26

score 1 · Answer 2 · answered Sep 27 '21 at 18:10

Create a QRadioButton with the following style:

QRadioButton{ 
background-color: None;
}

QRadioButton::indicator {
width: 14px;
height: 14px;
border-radius: 9px;
border: 2px solid;
}

Create a "QLabel" with the style as follow: (height-10, width-10)

border-radius: 5px;
background: #0068B5;

And place the Qlabel at the center of the QRadioButton (Using QTDesigner)

In PySide/PyQT while toggling hide the Qlabel if unchecked or show Qlabel if checked.

Worked for me !!!

How to make color for checked QRadioButton but looks like standard?

2 Answers2