gwt radio button style using css

Question

I tried to change the style of gwt radio button style and couldn't succeed.

Is it possible to change the gwt radio button style directly? If No what else should I do to change it.

I tried input[type="radio"]{ } in css, this doesn't help.

Thanks, Bennet.

Answer 1

From what i think from your question i made a sample, check if it suits your needs

Add the following css class to your application css

.gwt-RadioButton {
background-color: grey;
border: 1px solid #FFFF00;
margin: 10px;
font-size: 2em;
}

No need to add any addStyleNames as the RadioButton by deafult listens to the .gwt-RadioButton css class. The Result after applying above css is something like this,

EDITS :

After you provided the above sample it is very clear what you want. The .gwt-RadioButton allows you to style the RadioButton. What you want is to style the radio circle and the color when it gets selected. In order to do that you need to modify the input[type=radio] class and the label present with the RadioButton.

What we are doing here is disabling the default radio circle using display none and adding our own as a label:before content and then styling it. Hope this solves your problem. Some Styles that you need to add and then play around to suit your needs are as follows.

label {  
    display: inline-block;  
    cursor: pointer;  
    position: relative;  
    padding-left: 25px;  
    margin-right: 15px;  
    font-size: 13px;  
}

input[type=radio] {  
    display: none;  
}

label:before {  
    content: "";  
    display: inline-block;  

    width: 16px;  
    height: 16px;  

    margin-right: 10px;  
    position: absolute;  
    left: 0;  
    bottombottom: 1px;  
    background-color: #282E5A;  
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
}
.gwt-RadioButton label:before {  
    border-radius: 8px;  
}
input[type=radio]:checked + label:before {  
    content: "\2022";  
    color: aqua;  
    font-size: 30px;  
    text-align: center;  
    line-height: 18px;  
}