编辑输入type=“搜索”伪元素按钮('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)浏览器，请执行以下步骤：

打开并显示齿轮图标，右上角单击以打开上下文菜单中的下拉菜单，在"Preferences“(首选项)下，找到底部的"Elements”(元素)，然后启用“ DevTools user agent

• DOM"

”(显示用户代理阴影图标

​

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

​

​

Answer 2

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

假设你谈论的是“取消搜索”X图标，它只出现在Webkit浏览器中(Chrome，Safari，Opera)，你可以使用-webkit-search-cancel-button伪元素。例如：

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

哦，一定要使用搜索而不是value="Search" -当输入为空时，它会显示单词“placeholder="Search"”-当用户键入内容时，它会自动删除它。

Answer 3

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中消失。因此，上述解决方案目前在Edge中不起作用。