Support Forums

The forums are closed and will be removed when we launch our new site.

Looking for support? You can access the support system via your account.

Forums › Forums › Search & Filter Pro › Radio Button Filter Style

Viewing 10 posts - 1 through 10 (of 12 total)
1 2
  • Ease Cox
    (Private)  January 17, 2021 at 7:45 am #273006

    Hello Team,
    How modify Radio Button Style with image?

    Ease Cox
    (Private)  January 17, 2021 at 7:45 am #273007
    This reply has been marked as private.
    Trevor Moderator
    (Private)  January 17, 2021 at 8:06 am #273010

    You would need two images. It can be done with CSS. Do you have links (maybe from your media folder on your server) of the images you want to use?

    Ease Cox
    (Private)  January 17, 2021 at 1:50 pm #273016
    This reply has been marked as private.
    Trevor Moderator
    (Private)  January 18, 2021 at 11:58 am #273063

    Thanks. I am not entirely sure what you want to do. Do you want to replace the radio button, or the label with a color to match the word (i.e. blue image to replace the blue word), or add the image before OR after OR behind the label?

    Do you have a mockup image of what you want it to look like?

    Ease Cox
    (Private)  January 18, 2021 at 12:19 pm #273071
    This reply has been marked as private.
    Ease Cox
    (Private)  January 18, 2021 at 12:35 pm #273079
    This reply has been marked as private.
    Trevor Moderator
    (Private)  January 18, 2021 at 1:08 pm #273084

    I think I would not show the All Countries option, so maybe use a checkbox control instead?

    To show the flags instead of labels, and also hide the input button:

    .searchandfilter[data-sf-form-id="14110"] .sf-field-taxonomy-project_company > ul > li {
    margin-right: 20px;
    float: left;
}
.searchandfilter[data-sf-form-id="14110"] .sf-field-taxonomy-project_company > ul > li > input {
    display: none;
}
.searchandfilter[data-sf-form-id="14110"] .sf-field-taxonomy-project_company > ul > li > label {
    color: rgba(0,0,0,0);
    height: 64px;
    width: 64px;
    max-height: 64px;
    overflow: hidden;
}
.searchandfilter[data-sf-form-id="14110"] .sf-field-taxonomy-project_company > ul > li > input[value="austria"] + label {
    background: url(https://www.martabak.vip/wp-content/uploads/2021/01/blue.png);
}
.searchandfilter[data-sf-form-id="14110"] .sf-field-taxonomy-project_company > ul > li > input[value="belgium"] + label {
    background: url(https://www.martabak.vip/wp-content/uploads/2021/01/red.png);
}
.searchandfilter[data-sf-form-id="14110"] .sf-field-taxonomy-project_company > ul > li > input[value="france-property"] + label {
    background: url(https://www.martabak.vip/wp-content/uploads/2021/01/grey.png);
}
    Ease Cox
    (Private)  January 18, 2021 at 2:26 pm #273100

    Your support is gratifying. Thank you for your support

    Trevor Moderator
    (Private)  January 18, 2021 at 2:47 pm #273105

    Did this resolve your issue?

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 12 total)
1 2

The topic ‘Radio Button Filter Style’ is closed to new replies.