Confused about styling radio buttons

Home Forums Quform WordPress Confused about styling radio buttons

This topic is: resolved

This topic contains 2 replies, has 2 voices, and was last updated by  gwatt 5 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #23815

    gwatt
    Participant

    Hi there,

    I have looked through your guides and attempted to style radio buttons but to no avail. Downloading an existing template and looking through it was also unhelpful.

    I want to do radio buttons that look like the attached image (not the text layout, just the buttons).

    Below is the code in CSS to achieve this but I can’t work out how to make it work with your plugin. Could you please help me achieve this?

    ‘label.btn span {
    font-size: 1.5em ;
    }

    label input[type=”radio”] ~ i.fa.fa-circle-o{
    color: #c8c8c8; display: inline;
    }
    label input[type=”radio”] ~ i.fa.fa-dot-circle-o{
    display: none;
    }
    label input[type=”radio”]:checked ~ i.fa.fa-circle-o{
    display: none;
    }
    label input[type=”radio”]:checked ~ i.fa.fa-dot-circle-o{
    color: #7AA3CC; display: inline;
    }
    label:hover input[type=”radio”] ~ i.fa {
    color: #7AA3CC;
    }

    label input[type=”checkbox”] ~ i.fa.fa-square-o{
    color: #c8c8c8; display: inline;
    }
    label input[type=”checkbox”] ~ i.fa.fa-check-square-o{
    display: none;
    }
    label input[type=”checkbox”]:checked ~ i.fa.fa-square-o{
    display: none;
    }
    label input[type=”checkbox”]:checked ~ i.fa.fa-check-square-o{
    color: #7AA3CC; display: inline;
    }
    label:hover input[type=”checkbox”] ~ i.fa {
    color: #7AA3CC;
    }

    div[data-toggle=”buttons”] label.active{
    color: #7AA3CC;
    }

    div[data-toggle=”buttons”] label {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 2em;
    text-align: left;
    white-space: nowrap;
    vertical-align: top;
    cursor: pointer;
    background-color: none;
    border: 0px solid
    #c8c8c8;
    border-radius: 3px;
    color: #c8c8c8;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    }

    div[data-toggle=”buttons”] label:hover {
    color: #7AA3CC;
    }

    div[data-toggle=”buttons”] label:active, div[data-toggle=”buttons”] label.active {
    -webkit-box-shadow: none;
    box-shadow: none;
    }’

    Attachments:
    You must be logged in to view attached files.
    #23843

    Ally
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

    #23886

    gwatt
    Participant

    Thanks, this is now resolved.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.