对于那些在这里（像我一样）思考“如何检查此元素以应用自定义样式？"的人，您需要 * 启用用户代理shadow DOM* 以使这些供应商元素可访问。
对于 WebKit（Safari）和 Blink（Chrome、Edge、Opera、Brave）浏览器，请按照以下步骤操作：
1.打开开发工具（Ctrl+Shift+I）
1.找到右上角的齿轮图标，然后单击打开下拉菜单
1.在打开的上下文菜单中，在“* 首选项 "下，找到底部的“ 元素 *”并启用“显示用户代理阴影DOM”

• 如你所见，我是一个有文化的人，如果有一个黑暗的主题，我用它 *

在Webkit浏览器中设计“x”取消搜索按钮的样式

假设你正在谈论“取消搜索”[X]图标，它只出现在Webkit浏览器（Chrome，Safari，Opera）中，你可以使用-webkit-search-cancel-button伪元素。例如：

#Search::-webkit-search-cancel-button{
    position:relative;
    right:20px;    
}

演示：http://jsfiddle.net/5XKrc/1/

截图：

使用此方法，您甚至可以创建自己的取消按钮，例如以下样式：

#Search::-webkit-search-cancel-button{
    position:relative;
    right:20px;  

    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius:10px;
    background: red;
}

代替[X]将创建一个红色圆圈。

演示http://jsfiddle.net/5XKrc/3/

截图：

对于IE10及更高版本，您可以使用以下命令移动按钮：

#Search::-ms-clear{
   margin-right:20px
}

哦，请使用placeholder="Search"而不是value="Search"--当输入为空时，它将显示“搜索”一词--当用户键入内容时，它将自动删除。

2022跨浏览器一致的方法

这是一个跨浏览器的Clear Search“x”按钮的实现，它使用FontAwesome的实心时间圈SVG作为图标，并且适用于深色和浅色背景。它还标准化了Safari，使其采用Chrome实现，仅当表单字段有焦点时才显示图标。
第一个
注1.此S.O.问题明确 * 与clear button伪元素有关，* 该元素仅在基于Webkit的浏览器中支持（Edge、Safari和Chrome）。**目前（2022）Firefox仅支持功能标志后面的搜索清除按钮。**在Firefox公开发布此功能之前，支持Firefox的唯一真正的跨浏览器方法是通过一种变通方法，即利用HTML+CSS和绝对定位的<input type="reset">在单击时清除整个表单。请参阅stackoverflow.com/a/37846330请注意，如果您的搜索表单包含多个搜索字段，此解决方法将清除所有单选/复选框选择和其他字段。
NB 2.在Edge中，你的里程可能会有所不同，Edge也是基于Webkit的。在我的测试中（通过BrowserStack），Edge的一些版本不支持在::-webkit-search-cancel-button伪类中设置background-image: url()。

我想移动[小'x'图标]一点点左，这样它就会修复我的搜索栏图像。
用户希望UI中的内容不会移动太多。如果您决定移动“x”图标，请考虑使用伪类并移动搜索图标：
第一次
如果搜索图标嵌入您的背景图像，请将其移动到具有role="presentation"属性的第二个图像中，并将其放置在标记中您的input之后：

<input id="search" name="Search" type="search" value="Search" />
<svg role="presentation" class="i-search" viewBox="0 0 32 32" width="14" height="14" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3">
  <circle cx="14" cy="14" r="12" />
  <path d="M23 23 L30 30" />
</svg>

将其放置在用户期望的位置：

#search + svg {
  margin-left: -30px;
  margin-bottom: -2px;
}

然后使用:placeholder-shown伪类隐藏和显示它：

#search + svg {
  visibility: hidden;
}
#search:placeholder-shown + svg {
  visibility: visible;
}

如果你愿意的话，你可以设计“x”图标的样式。但是你可能不想再这样做了。

使用单一CSS规则区块，以dark或light背景执行简单的“X”。执行程式码片段以查看范例。
第一个
参考：https://stackoverflow.com/a/52141879/8762323

#input[type="search"]::-webkit-search-cancel-button {
        // Using the two lines below will allow you to insert a image
        -webkit-appearance: none;
        -webkit-user-modify: read-write !important;
        height: 28px;
        content: url("clear button.png");

Just to highlight better how to figure out such kinds of things by ourselves. As shown and mentioned in @UncaughtTypeError answer above https://stackoverflow.com/a/58484957/7668448
Also in the last section I do go to show how to do different things including changing the color. And with examples.
I loved the answer because it was teaching us how to fish rather than here is the fish
I want to clarify that further for others. Who may didn't notice.

By enabling the show user agent shadow dom in elements section of preferences in devtools .
Now you'll be able to access the shadow dom that is created by the agent (browser engine or browser shortly). In dev tools.

• Get to know how to select the element
• You can manipulate and experiment faster through the dev-tool. And figuring out properties and default values and what doesn't work. (example at the end)

What is shadow dom?

From Mozilla doc Using_shadow_DOM
An important aspect of web components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean. The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element. This article covers the basics of using the Shadow DOM.
You can learn more about it. On the link above.

How to figure out how you would refer to those hidden elements

After enabling showing the agent shadow dom . Now you can see those hidden dom elements.

Select the element. And check the Styles corresponding selector. As shown by the red box in the illustration above.

input[type="search" i]::-webkit-search-cancel-button {

}

And that's it.
Can test an example below:
https://codepen.io/mohamedlamineallal/pen/JjZmdPv
See before enabling and after enabling the agent dom shadow .
And for demonstration purposes. You can see, I changed the color using filter , resize the button with padding , and repositioned it with margin-right .

Elements around manipulating the clear button

A great deal with this method is that now you can use the Dev-tool to experiment faster. That includes figuring out what doesn't work at a better speed. Example mask-image with background-color . Or pseudo-element .before .
Things we can figure out:

• to position, we have to use margin-right
• resize the clear button with padding
• To show and hide we got to use opacity
• appearance can allow us to hide the default behavior fully. [If we want to disable the default button. We can use appearance: none; (default: appearance: auto; )]
• We can see all the default settings
• To replace the button, use background-image with URL no-repeat and center. Also, set the height and width

... that at a fast glimpse.

• Otherwise, if you want to just change the color, you can with using a filter with (invert, sepia, saturate, hue, brightness, contrast) as in

filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);

( code pen )
You can use the calculator here: 1 , 2
You can see the details of that method here (SO answer)

• or also the svg filters method (SO answer) which I guess it's more ideal (why in the SO answer [link]).

filter: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg">\
    <filter id="recolor" color-interpolation-filters="sRGB">\
      <feColorMatrix type="matrix" values="\
        0 0 0 0 R\
        0 0 0 0 G\
        0 0 0 0 B\
        0 0 0 A 0\
      "/>\
    </filter>\
  </svg>\
  #recolor');

read the answer (link).

Reimplement all

And surely if the desired output is more complex. Simply disabling the default behavior and re-implement it fully would be more clean and easy and faster.
Using appearance: none; will hide and disable the default behavior.

input[type="search" i]::-webkit-search-cancel-button {
   appearance: none;
}

You can use position: absolute; on a span element to keep the input behavior as outline on focus (can use padding-right for not letting text overflow below the button) and you can also use CSS URL for background-image (SVG icons, you can have utf8 inline encoded SVG where you can change the color, including dynamically if needed) ... [take keywords, if they make sense check them]
Absolutely: don't use pseudo-element :after . You can't add a js event listener to it. Using a span is cleaner and faster.
Here are some examples:

• Using span with absolute position
• Using :after pseudo-element and using the event-pointer workaround. (event bubbling make it possible) (you can read the comment in the playground)

The :after example demonstrate. Using a flex-box system. Hidding input outline and border. And re-implementing them. Could have used that in the span example. use outline: none; to disable the default outline .
I advise always to use the dom el (span) way.

我不确定这是否是您要查找的内容，但您可以将搜索栏的样式设置为
fiddle

HTML格式

<div id="input">
<input type="text" id="tb" />
    <a id="close" href="#"><img src="http://www.ecoweb.info/sites/default/files/tips-close.png"></a>
</div>

CSS格式

#tb
{
    border:none;
}
#input
{
    padding:0px;
    border: 1px solid #999;
    width:150px;
}

#close
{
    float:right;
}