编辑输入类型=“搜索”伪元素按钮（'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]图标（Chrome，Safari，Opera），您可以使用-webkit-search-cancel-button伪元素。 E.g：

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

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">

NB。尽管Edge也是基于Webkit的，并且当前支持::-webkit-search-cancel-button伪类对 some 的修改，但我的发现表明，只要您使用url()语法设置背景图像， css，该按钮在Edge中消失。因此，上述解决方案目前在Edge中无法使用。

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 < / em>以使这些供应商元素可访问。

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

1. 打开DevTools（ Ctrl + Shift + I ）
2. 在右上角找到3个垂直点，然后单击以打开下拉菜单
3. 从此下拉菜单中单击“ 设置”（列表中的倒数第二个）
4. 在打开的上下文菜单中的“ 首选项”下，在底部找到“ 元素”并启用“ 显示用户代理影子DOM >“

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

Answer 5

我不确定这是你在找什么，但你可以像这样设置搜索栏的样式

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