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

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

    Hello Team,
    How modify Radio Button Style with image?

    Anonymous
    (Private)  January 17, 2021 at 7:45 am #273007
    This reply has been marked as private.
    Trevor
    (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?

    Anonymous
    (Private)  January 17, 2021 at 1:50 pm #273016
    This reply has been marked as private.
    Trevor
    (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?

    Anonymous
    (Private)  January 18, 2021 at 12:19 pm #273071
    This reply has been marked as private.
    Anonymous
    (Private)  January 18, 2021 at 12:35 pm #273079
    This reply has been marked as private.
    Trevor
    (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);
}
    Anonymous
    (Private)  January 18, 2021 at 2:26 pm #273100

    Your support is gratifying. Thank you for your support

    Trevor
    (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