编辑输入 type="search" 伪元素按钮 ('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;
}

原文由 user3139952 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

如您所见，我是一个文化人，如果有黑暗主题，我会使用它

原文由 UncaughtTypeError 发布，翻译遵循 CC BY-SA 4.0 许可协议