html - Bootstrap 4如何使用css通过清除按钮颜色更改来更改输入搜索

Question

使用搜索输入出现默认清除按钮 下面是 html 代码块

<div class="input-group search-style ">
                <input id="Search" class="form-control  border-secondary py-2 " type="search" placeholder="search" style="border-right: none !important;">
                <div class="input-group-append">
                    <button class="btn removefocus" type="button" style="border-top: 1px solid gray;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;">
                        <i class="fa fa-search "></i>
                    </button>
                </div>
            </div>

清除按钮的默认颜色为蓝色。如何在我的搜索输入中更改此颜色。

标签： htmlcssbootstrap-4

Answer 1

唯一的方法是将关闭图标的外观设置为无，并改用背景：

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  background: some-image or svg;
}

https://jsfiddle.net/mLoeds3c/1/