Change colors in checkboxes and radio buttons

  • Resolved harryman7

    (@harryman7)


    4 years, 9 months ago

    Hello,
    first of all, thank you for that excellent form plugin. There is one little thing i don’t know how to deal with it. within the checkboxes and radio buttons the color blue appears when activating. Blue somehow doesn’t fit to my website at all. Is it only possible to change that with css? I’m not fit with that and know to get into it will cost me at least 2 or 3 hours… is there a setting that i haven’t seen yet? Thanks in advance!

    Kind regards, Harry

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Shahjahan Jewel

    (@techjewel)

    You can customize that from Form Styler (Form Preview Screen)

    Thread Starter harryman7

    (@harryman7)

    Ok, you mean it’s only possible with Pro-version, right?

    Plugin Author Shahjahan Jewel

    (@techjewel)

    The styler is available on pro version. Otherwise you can just use CSS to change the colors.

    Thanks

    I’m trying to figure this out as well. I found a custom checkbox/radio generator that uses both css and html. What do I need to change on it (ex: .fluent_form_1), and where do I put the html?

    HTML:

    <label class="checkbox">
    <input type="checkbox" />
    <span>Check Me</span>
</label>

    CSS:

    .checkbox {
    display: inline-flex;
    cursor: pointer;
    position: relative;
}

.checkbox > span {
    color: #34495E;
    padding: 0.5rem 0.25rem;
}

.checkbox > input {
    height: 25px;
    width: 25px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    border: 1px solid #ff9933;
    border-radius: 4px;
    outline: none;
    transition-duration: 0.3s;
    background-color: #fff;
    cursor: pointer;
  }

.checkbox > input:checked {
    border: 1px solid #ff9933;
    background-color: #fff;
}

.checkbox > input:checked + span::before {
    content: '\2713';
    display: block;
    text-align: center;
    color: #ff9933;
    position: absolute;
    left: 0.7rem;
    top: 0.2rem;
}

.checkbox > input:active {
    border: 2px solid #ff9933;
}

    I’m trying to follow instructions found HERE.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Change colors in checkboxes and radio buttons’ is closed to new replies.