Question

Creating a couple forms and I have styled the text inputs and textareas the way I would like them to look. I am now getting to the radio buttons and checkboxes and they have naturally inherited the style of the other inputs.

Is there a way to reset this and put them back to default styling? I’ve never really run into this problem. Looking for only css or html solution.

Here is a picture of what is happening :
https://i.stack.imgur.com/ivvmB.jpg

Here is my relevant css

/* style drop down box */
#panel_body select {
    width:243px;
    height:40px;
    border:1px solid #9b9b9b;
    border-radius:8px;
}

/* style input elements */
#panel_body input, #panel_body textarea {
    width:243px;
    height:40px;
    border:1px solid #9b9b9b;
    border-radius:8px;
    background: -webkit-linear-gradient(top, #ffffff, #adadad);
    background: -moz-linear-gradient(top, #ffffff, #adadad);
    background: -o-linear-gradient(top, #ffffff, #adadad);
    background: -ms-linear-gradient(top, #ffffff, #adadad);
    background: linear-gradient(top, #ffffff, #adadad);
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
 StartColorStr='#FFffff', EndColorStr='#adadad');

}

/* style textareas */
#panel_body textarea {
    box-sizing: border-box;
    ms-box-sizing: border-box;
    webkit-box-sizing: border-box;
    moz-box-sizing: border-box;
    height:100px;
    padding:5px;
    font-family: Calibri, Arial, sans-serif;
}

/* input elements hover and select state */
#panel_body input:hover, #panel_body textarea:hover,  
#panel_body input:focus, #panel_body textarea:focus {  
    border-color: #025389;  
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;  
    }

Answer 1

Use:

input[type=radio], input[type=checkbox] {
    // Reset attributes here
}

Or use a more specific selector than just input in the rest of your CSS.