Radio Button Filter Style

Anonymous

#273006

Hello Team,
How modify Radio Button Style with image?

Anonymous

#273007

This reply has been marked as private.

Trevor

#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

#273016

This reply has been marked as private.

Trevor

#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

#273071

This reply has been marked as private.

Anonymous

#273079

This reply has been marked as private.

Trevor

#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

#273100

Your support is gratifying. Thank you for your support

Trevor

#273105

Did this resolve your issue?

[Author]

Posts