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

This question already has answers here:

Editing input type=“search” Pseudo-element Button ('x')
                                
                                    （4个答案）
                                
                        
                                4个月前关闭。
            
                    
默认的清除按钮是使用搜索输入出现的，下面是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>

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

最佳答案

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

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

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