SVG для radiobutton и checkbox

Общее
1

Привет, есть вопрос, нужно вместо стандартных radiobutton/</>checkbox вставить свг картинки, как это сделать правильно?

Нужно прописать их как background-image: url("…"); и использовать ::before?
Или через <\use> использовать?

Есть собранный свг спрайт и хотелось бы через спрайт использовать, но когда прописал через <\use> то не отображается картинка.

Если кто, что знает подскажите как быть, что лучше или может у кого какая ссылка есть с полезной инфой, сам не нашел. Нашел только про png/jpeg картинки фоном вставлять, а про svg ничего толкового.

Спасибо за внимание)

2

Пожалуйста, поправьте отображение тегов в сообщении с помощью кнопки </>, пока я ищу что-нибудь по svg-спрайтам.
UPD: http://dreamhelg.ru/2017/02/symbol-svg-sprite-detail-guide/

1 лайк
3

спасибо) будем изучать)))

UPD: заработало!!! спасибо огромное)))

1 лайк
4

Еще раз добрый вечер, однако требуется помощь, свг появились и пишу так:

<input class="contact-form__impression__input contact-form--input" type="radio" name="impression-radio" id="positive-field" checked="checked" >
<label class="contact-form__impression__label contact-form--radio" for="positive-field">
<svg class="contact-form__impression__radio">
    <use xlink:href="#icon-map-marker"></use>
</svg>

Но не могу понять, как сделать, свг вместо радио кнопки. Подскажите пожалуйста, как это сделать.

Думаю, что это можно сделать с помощью дисплей нон, но дальше, что-то ничего не приходит в голову, как с этим быть. Свг картинки вставил 3 раза к трем инпутам для радио кнопки, и эти три свг видно, а нужно, чтоб было видно только одну кнопку, которая выбрана. Не пойму как это сделать.

5

Если я правильно вас поняла, то здесь вы должны вставлять svg как фон и использовать псевдоэлементы для label. А настоящие кнопки нужно скрыть - display: none; как вы сказали.