编辑输入类型="搜索"伪元素按钮('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. 打开开发者工具 ( Ctrl+Shift+I )
2. 找到右上角的齿轮图标，然后单击以打开下拉菜单
3. 在打开的上下文菜单中，在“首选项”下，在底部找到“元素”并启用“显示用户代理影子 DOM ”

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

Answer 2

假设您正在谈论仅在Webkit浏览器中出现的"取消搜索"[X]图标(Chrome,Safari,Opera),您可以使用-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"- 当输入为空时它会显示"搜索"字样 - 当用户输入内容时它会自动删除它.

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我的发现表明，只要您使用url()css 中的语法设置背景图像，Edge 中的按钮就会消失。因此，上述解决方案目前在 Edge 中不起作用。

Answer 4

我想将 [小'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 5

使用单个 CSS 规则块执行带有dark或背景的简单“X” 。light运行代码片段以查看示例。

/* light backdrops only */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 10px;
  background:
    linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,#000 45%,#000 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%),
    linear-gradient(135deg, transparent 0%,transparent 43%,#000 45%,#000 55%,transparent 57%,transparent 100%);
}

/* dark backdrops only */
input[type="search"][value="dark"]::-webkit-search-cancel-button {
  background:
    linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,#fff 45%,#fff 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%),
    linear-gradient(135deg, transparent 0%,transparent 43%,#fff 45%,#fff 55%,transparent 57%,transparent 100%);
}

<input type="search" value="light">
<input type="search" value="dark" style="background:black; color:white;">

参考：/sf/answers/3649931561/