21
Июл
2021

Белый фон и границы для svg-картинки

Есть кнопка с лупой (рядом с полем ввода Поиск по товарам) как на

введите сюда описание изображения

Привожу код

.close {
        margin-top: -14px;
        padding-top: 5px;
        padding-left: 5px;
        padding-right: 5px;
        font-size: 24px;
        cursor: pointer;
        display: inline-block;
}

#SearchBlock {
    padding-top: 5px;
    padding-left: 25px;
    padding-right: 50px;
    display: flex;
}

#SearchBlock input {
    height: 100%;
}

#SearchBlock #SearchButton {
    height: 100%;
}
            <div id="dropdownwindowright">
                    <div class="crosslineright">
                        <div class="close">&times;</div>
                    </div>
                    <div class="CatalogMenuSearch">
                        <span id="SearchBlock">
                            <span>
                                <input type="search" placeholder="Поиск по товарам" id="SearchInput">
                            </span>
                            <span>
                                <button id="SearchButton"><svg class=" Icon" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.22703 5.22703C7.86307 2.591 12.1369 2.591 14.773 5.22703C17.2298 7.68382 17.3968 11.5632 15.2742 14.2135L19.0607 18L18 19.0607L14.2135 15.2742C11.5632 17.3968 7.68381 17.2298 5.22703 14.773C2.59099 12.1369 2.59099 7.86307 5.22703 5.22703ZM13.7123 6.28769C11.6621 4.23744 8.33794 4.23744 6.28769 6.28769C4.23744 8.33795 4.23744 11.6621 6.28769 13.7123C8.33794 15.7626 11.6621 15.7626 13.7123 13.7123C15.7626 11.6621 15.7626 8.33795 13.7123 6.28769Z"></path></svg></button>
                            </span>
                        </span>
                    </div>
                    <div class="CatalogMenuRight">
                    </div>
            </div>

Подскажите как добиться вида кнопки с лупой как на скриншоте (с белым фоном и границами).

Источник: https://ru.stackoverflow.com/questions/1307515/%D0%91%D0%B5%D0%BB%D1%8B%D0%B9-%D1%84%D0%BE%D0%BD-%D0%B8-%D0%B3%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B-%D0%B4%D0%BB%D1%8F-svg-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8

Тебе может это понравится...

Добавить комментарий