编辑输入 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;
}

Answer 1

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

假设您正在谈论仅在 Webkit 浏览器（Chrome、Safari、Opera）中出现的“取消搜索”[X] 图标，您可以使用 -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" - 当输入为空时它会显示单词“search” - 当用户输入内容时会自动删除它。

Answer 2

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

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;
}

Answer 3

我想将 [小“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”图标的样式。但你可能不想再这样做了。

Answer 4

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

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

1. 打开 DevTools (Ctrl+Shift+I)
2. 找到右上角的齿轮图标，然后点击打开下拉菜单
3. 在打开的上下文菜单中，在“Preferences”下，找到底部的“Elements”并启用“Show user agent shadow DOM"

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

Answer 5

2020 跨浏览器一致方法

这是清除搜索“x”按钮的跨浏览器实现，它使用来自 FontAwesome 的实心时间圆 SVG 作为图标，适用于深色和浅色背景。它还标准化 Safari 以采用 Chrome 实现，仅在表单字段具有焦点时显示图标。

input[type="search"] {
  border: 1px solid gray;
  padding: .2em .4em;
  border-radius: .2em;
}

input[type="search"].dark {
  background: #222;
  color: #fff;
}

input[type="search"].light {
  background: #fff;
  color: #222;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  border-radius: 50em;
  background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
}

input[type="search"]:focus::-webkit-search-cancel-button {
  opacity: .3;
  pointer-events: all;
}

input[type="search"].dark::-webkit-search-cancel-button {
  filter: invert(1);
}

<input type="search" placeholder="search" class="light">
<input type="search" placeholder="search" class="dark">

注意。虽然 Edge 也是基于 webkit 的，并且目前支持使用 ::-webkit-search-cancel-button 伪类进行 一些 修改，但我的发现表明，只要您在 css 中使用 url() 语法设置背景图像，按钮消失在边缘。因此，上述解决方案目前在 Edge 中不起作用。

Answer 6

#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");