css - 编辑输入类型 ="search"伪元素 Button ('x' )

Question

我正在尝试制作一个看起来不错的搜索栏。我所做的是，我制作了一个搜索栏的图像，我将图像添加到输入的背景中，我正在编辑字体将出现的位置和大小。我唯一找不到编辑方法的是使用输入类型搜索时出现的小“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;
}

Answer 1

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

对于 WebKit (Safari) 和 Blink (Chrome,Edge,Opera,Brave) 浏览器，请按照以下步骤操作:

1. 打开 DevTools (Ctrl+Shift+I)
2. 找到右上角的齿轮图标，然后点击打开下拉菜单
3. 在打开的上下文菜单中，在“首选项”下，找到底部的“元素”并启用“显示用户代理影子 DOM"

如你所见，我是个文化人，如果有黑暗主题，我就用它