This demo will cover the necessary CSS styles to create a form that uses radio or select fields without the displaying the generic looking default radio or select boxes similar to the Smartphone Buyback form shown below.



The first step in customizing the appearance of a form is to give it a custom CSS class. This allows custom CSS to target any form that uses the custom class. Custom CSS classes are added to forms by navigating to the Form Settings page for a specific form and adding the class to the CSS Class Name field.


In this case, add the CSS class list-inline-box


Copy & paste the styles below to the site's Custom CSS panel. This will add the custom inline styles to radio and select fields. The values for font-size, border widths/colors, and text colors can be customized to match the site. 

/* CUSTOMIZE PHONE SELECT FORM | SMARTPHONE BUYBACK PG */
.list-inline-box .gfield ul.gfield_radio li,
.list-inline-box .gfield ul.gfield_checkbox li {
    display: inline-block;
    padding-right: .6em;
}


/* Remove checkboxes */
.list-inline-box .gfield ul.gfield_radio li input[type="radio"],
.list-inline-box .gfield ul.gfield_checkbox li input[type="checkbox"] { display: none; }

/* Field Labels */
.list-inline-box .gfield ul.gfield_radio li input[type="radio"] + label,
.list-inline-box .gfield ul.gfield_checkbox li input[type="checkbox"] + label {
    text-align: center;
    font-size: 17px;
    color: #70757a;
    padding: 17px;
    cursor: pointer;
    background-color: transparent;
    border: 2px solid #DBDBDB;
    transition: all 0.25s ease;
}

/* Field Labels : Hover */
.list-inline-box .gfield ul.gfield_radio li input[type="radio"] + label:hover,
.list-inline-box .gfield ul.gfield_checkbox li input[type="checkbox"] + label:hover {
    color: #FF7712;
    background-color: transparent;
    border: 2px solid #DBDBDB;
}

/* Field Labels : Selected */
.list-inline-box .gfield ul.gfield_radio li input[type="radio"]:checked + label,
.list-inline-box .gfield ul.gfield_checkbox li input[type="checkbox"]:checked + label {
    color: #212121;
    background-color: transparent;
    border: 2px solid #FF7712;
}