Как изменить стрелку в выборе с выбором на встроенный SVG? - PullRequest
Новая
       15

Как изменить стрелку в выборе с выбором на встроенный SVG?

0 голосов
/ 21 апреля 2020

Я не могу понять, как я могу изменить стрелку раскрывающегося списка на встроенный SVG с https://github.com/jshjohnson/Choices. Я знаю, что могу изменить его с помощью CSS.

Это мой код. 

<!DOCTYPE html>
<html>
    <head>
        <title>Choices Test</title>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1"
            />
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/styles/choices.min.css"
            />

        <script src="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/scripts/choices.min.js"></script>
        <style>
            .svg-inline {
                display: inline-block;
                font-size: inherit;
                max-height: 1em;
            }
        </style>
    </head>
    <body>

        <h2>Single select input</h2>
        <label for="choices-single-default">Default</label>
        <select class="form-control" data-trigger name="choices-single-default" id="choices-single-default" placeholder="This is a search placeholder">
            <option value="">This is a placeholder</option>
            <option value="Choice 1">Choice 1</option>
            <option value="Choice 2">Choice 2</option>
            <option value="Choice 3">Choice 3</option>
        </select>
        <svg aria-hidden="true" focusable="false" class="svg-inline svg-icon__star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg>                            
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var genericExamples = document.querySelectorAll('[data-trigger]');
                for (i = 0; i < genericExamples.length; ++i) {
                    var element = genericExamples[i];
                    new Choices(element, {
                        placeholderValue: 'This is a placeholder set in the config',
                        searchPlaceholderValue: 'This is a search placeholder',
                    });
                }
            });
        </script>
    </body>
</html>

Теперь я хотел бы поставить звезду в место стрелки.

enter image description here

...