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?

Answer 1

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);
}