Css 编辑输入类型="；搜索“；伪元素按钮（'；x'；）

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

这是我的HTML：

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

在Webkit浏览器中设置“x”取消搜索按钮的样式 假设您谈论的是仅在Webkit浏览器（Chrome、Safari、Opera）中出现的“取消搜索”[X]图标，您可以使用pseudo元素。例如：

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

演示：

截图：

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

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

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

而不是[X]将创建一个红色圆圈

演示

截图：

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

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

---

哦，一定要使用

placeholder=“Search”

而不是

value=“Search”

——当输入为空时，它会显示单词“Search”—当用户键入某个内容时，它会自动删除。

我不确定这是否是您想要的，但您可以这样设置搜索栏的样式

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>

我想将[小的“x”图标]向左移动一点，这样它就能修复我的搜索栏图像

用户希望在UI中东西不会移动太多。如果您决定移动“X”图标，请考虑使用伪类，然后移动搜索图标：

如果搜索图标嵌入了背景图像，则将其移动到具有

role=“presentation”

属性的第二个图像中，并将其立即放置在标记中的

输入之后：

<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 {
  visibility: hidden;
}
#search:placeholder-shown + svg {
  visibility: visible;
}

如果愿意，您可以设置“x”图标的样式。但是您可能不想再这样做了。
如果有人发现自己在这里（正如我所做的那样）想“如何检查此元素以应用自定义样式？”，则需要启用用户代理阴影DOM以使这些供应商元素可访问

对于WebKit（Safari）和Blink（Chrome、Edge、Opera、Brave）浏览器，请执行以下步骤：

打开DevTools（Ctrl+Shift+I）
找到右上角的齿轮图标，然后单击打开下拉菜单
在打开的上下文菜单中，在“首选项”下，找到底部的“元素”，并启用“显示用户代理阴影DOM”

正如你所看到的，我是一个有文化的人，如果有一个黑暗的主题，我会用它

2020跨浏览器一致性方法
这是一个Clear Search“x”按钮的跨浏览器实现，它使用FontAwesome中的solid times circle SVG作为图标，适用于深色和浅色背景。它还标准化了Safari，采用Chrome实现，仅在表单字段具有焦点时显示图标


input[type=“search”]{
边框：1px纯色灰色；
填料：2em.4em；
边界半径：2米；
}
输入[type=“search”]。暗{
背景：#222；
颜色：#fff；
}
输入[type=“search”]。指示灯{
背景：#fff；
颜色：#222；
}
输入[type=“search”]：-webkit搜索取消按钮{
-webkit外观：无；
高度：1米；
宽度：1米；
边界半径：50em；
背景：url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg)无重复50%50%；
背景尺寸：包含；
不透明度：0；
指针事件：无；
}
输入[type=“search”]：焦点：：-webkit搜索取消按钮{
不透明度：.3；
指针事件：全部；
}
输入[type=“search”]。暗：：-webkit搜索取消按钮{
过滤器：反转（1）；
}

您的问题不完整。您给出的示例无法重现您所描述的问题。@hakre有，但仅在Webkit中有。@Yuriy实际上在IE 11中，您在输入字段中得到了x，但如何更改它有点困难，在FireFox中您还没有它。@Paraíso感谢您的提示。更新了IE10+的答案以使用
-ms clear
以下是我尝试过的解决方案。可以用JS在上创建吗？最简单的方法是什么？@kingkapd有可能：对于您的示例，它不禁用功能吗？我无法实际单击“清除”按钮并清除输入。如何处理此问题？？如何改变crossGood溶液的颜色。。。浏览器解决方案的工作方式很诡异（仅在悬停或焦点等上显示，在不同浏览器中不相同）。这不是对所问问题的回答。@JoshHabdas不是，但它非常有用。当我不得不处理OP的问题时，我学到了一些新的东西。非常有帮助，谢谢。我刚刚在Edge中运行了这个片段，一切似乎都正常工作哦，很有趣！（太棒了！）我想知道是什么把我的测试搞砸了
<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;
}

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