CSS 编辑 input type="search" 伪元素按钮 ('x')
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20804016/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Editing input type="search" Pseudo-element Button ('x')
提问by user3139952
I'm trying to make a search bar that will look nice. What I did is, I made an image of an search bar and I'm adding the image to the back-ground of the input and I'm editing the place and the size that the font will appear. The only thing that I can't find a way to edit is the small 'x' button that appears when I'm using input type search. I want to move it a little bit left so it will fix my search bar image.
我正在尝试制作一个看起来不错的搜索栏。我所做的是，我制作了一个搜索栏的图像，并将图像添加到输入的背景中，我正在编辑字体将出现的位置和大小。我唯一找不到编辑方法的是使用输入类型搜索时出现的小“x”按钮。我想将它向左移动一点，以便修复我的搜索栏图像。
Here is my HTML:
这是我的 HTML：
<input id="search" name="Search" type="search" value="Search" />
Here is my CSS:
这是我的 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;
}
回答by Yuriy Galanter
Styling the "x" cancel search button in Webkit browsers
样式化 Webkit 浏览器中的“x”取消搜索按钮
Assuming you're talking about "Cancel search" [X] icon that appeas in Webkit browsers only (Chrome, Safari, Opera) you can use -webkit-search-cancel-buttonpseudo-element. E.g:
假设您正在谈论仅在 Webkit 浏览器（Chrome、Safari、Opera）中出现的“取消搜索”[X] 图标，您可以使用-webkit-search-cancel-button伪元素。例如：
#Search::-webkit-search-cancel-button{
position:relative;
right:20px;
}
Demo: http://jsfiddle.net/5XKrc/1/
演示：http: //jsfiddle.net/5XKrc/1/
Screenshot:
截屏：
Using this approach you can even create your own cancel button, for example this style:
使用这种方法，您甚至可以创建自己的取消按钮，例如这种样式：
#Search::-webkit-search-cancel-button{
position:relative;
right:20px;
-webkit-appearance: none;
height: 20px;
width: 20px;
border-radius:10px;
background: red;
}
Instead of [X] will create a red circle.
而不是 [X] 将创建一个红色圆圈。
Demo http://jsfiddle.net/5XKrc/3/
演示http://jsfiddle.net/5XKrc/3/
Screenshot:
截屏：
For IE10 and above you can use following to move the button:
对于 IE10 及更高版本，您可以使用以下命令移动按钮：
#Search::-ms-clear{
margin-right:20px
}
Oh and do use placeholder="Search"instead of value="Search"- it will display word "search" when input is empty - and will automatically remove it when user types something.
哦，请使用placeholder="Search"而不是value="Search"- 当输入为空时它会显示单词“搜索” - 并且在用户输入内容时会自动删除它。
回答by UncaughtTypeError
For anyone finding themselves here (as I did) thinking "how do I inspect this element to apply custom styles?", you'll need to enable the user agent shadow DOMto make these vendor elements accessible.
对于发现自己在这里（就像我一样）思考“我如何检查此元素以应用自定义样式？”的任何人，您需要启用用户代理影子 DOM以使这些供应商元素可访问。
For WebKit(Safari) & Blink(Chrome,Edge,Opera,Brave) browsers, follow these steps:
对于WebKit(Safari) 和Blink（Chrome、Edge、Opera、Brave）浏览器，请按照以下步骤操作：
- Open DevTools (Ctrl+Shift+I)
- Find the 3x vertical dots, top-right and click to open up the dropdown menu
- Click "Settings" from this dropdown menu (2nd to last option in the list)
- In the context menu that opens, under "Preferences", find "Elements" towards the bottom and enable "Show user agent shadow DOM"
- 打开开发者工具 ( Ctrl+Shift+I)
- 找到右上角的 3x 垂直点，然后单击以打开下拉菜单
- 单击此下拉菜单中的“设置”（列表中的倒数第二个选项）
- 在打开的上下文菜单中，在“首选项”下，在底部找到“元素”并启用“显示用户代理影子 DOM”
As you can see, I'm a man of culture, if there is a dark theme, I use it
正如你所看到的，我是一个有文化的人，如果有一个黑暗的主题，我就用它
回答by Josh Habdas
I want to move [the small 'x' icon] a little bit left so it will fix my search bar image.
我想将 [小'x' 图标] 向左移动一点，以便修复我的搜索栏图像。
Users expect things not to move much is UIs. If you decide to move the 'x' icon consider using pseudo-classes and move your search icon instead:
用户希望 UI 不会移动太多。如果您决定移动“x”图标，请考虑使用伪类并移动您的搜索图标：
If the search icon is embedded your background image move it into a second image with role="presentation"attribute and place it immediately after your inputin the markup:
如果嵌入了搜索图标，您的背景图像将其移动到具有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>
Position it where the user expects:
将其放置在用户期望的位置：
#search + svg {
margin-left: -30px;
margin-bottom: -2px;
}
Then hide and show it using the :placeholder-shownpseudo-classes:
然后使用:placeholder-shown伪类隐藏和显示它：
#search + svg {
visibility: hidden;
}
#search:placeholder-shown + svg {
visibility: visible;
}
You may style the 'x' icon if you wish. But you might not want to anymore.
如果您愿意，您可以设置“x”图标的样式。但你可能不想了。
回答by tilda
I'm not sure is this what you were looking for, but you can style your search bar like this
我不确定这是否是您要查找的内容，但是您可以像这样设置搜索栏的样式
HTML
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
CSS
#tb
{
border:none;
}
#input
{
padding:0px;
border: 1px solid #999;
width:150px;
}
#close
{
float:right;
}
