编辑输入 type="search" 伪元素按钮 ('x')

我正在尝试制作一个看起来不错的搜索栏。我所做的是，我制作了一个搜索栏的图像，并将该图像添加到输入的背景中，然后编辑字体将出现的位置和大小。 我唯一找不到编辑的方法是使用输入类型搜索时出现的小“x”按钮。 我想将其向左移动一点，这样它就能修复我的搜索栏图像。

这是我的 HTML：

<input id="search" name="Search" type="search" value="Search" />

这是我的CSS：

#search{
    width: 480px;
    height: 49px;
    border: 3px solid black;
    padding: 1px 0 0 48px;
    font-size: 22px;
    color: blue;
    background-image: url('images/search.jpg');
    background-repeat: no-repeat;
    background-position: center;
    outline: 0;
}

对于任何发现自己在这里（就像我一样）思考“如何检查此元素以应用自定义样式？“，你需要启用用户代理影子 DOM使这些供应商元素可访问。

For WebKit（苹果浏览器） ＆Blink(Chrome、Edge、Opera、Brave) 浏览器，请按照以下步骤操作：

1. 打开开发工具（Ctrl+Shift+I)
2. 找到右上角的齿轮图标，然后单击打开下拉菜单
3. 在打开的上下文菜单中的“优先“， 寻找 ”Elements“朝底部并启用”显示用户代理影子 DOM"

As you can see, I'm a man of culture, if there is a dark theme, I use it