Bootstrap 4如何使用css通过清除按钮颜色更改来更改输入搜索[重复]答案

【问题标题】：Bootstrap 4 How to change input search with clear button color change using css [duplicate]Bootstrap 4如何使用css通过清除按钮颜色更改来更改输入搜索[重复]
【发布时间】：2019-09-23 23:49:45
【问题描述】：

使用搜索输入会出现默认清除按钮，下面是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>

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

【问题讨论】：

这里没有提到颜色，我只是在谈论关闭图标的颜色变化，在我的情况下不需要额外的 divs/icon/image。
我希望默认的蓝色十字是红色线程，但提到的没有帮助。

标签： html css bootstrap-4

【解决方案1】：

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

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

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

【讨论】：