CSS ::-webkit-search-results-button Pseudo-Element
The ::-webkit-search-results-button pseudo-element is a non-standard CSS extension associated with a browser-provided search results control inside an HTML <input type="search"> element. It was introduced for search field interfaces in WebKit-based implementations, but its availability and behavior are limited and should not be relied upon for modern cross-browser search interfaces.
Syntax
input[type="search"]::-webkit-search-results-button {
display: none;
}The selector targets a browser-specific search results button associated with an HTML search input, if the browser exposes that internal control.
The input[type="search"] selector identifies search fields, while ::-webkit-search-results-button targets the internal results control.
The display: none declaration requests that the targeted control not be displayed.
The -webkit- prefix identifies an implementation-specific extension rather than a standardized CSS pseudo-element.
Note: This selector does not create a search results button. If the browser does not provide the internal control, the rule has no visible effect.
How It Works
The HTML <input type="search"> element provides a text-entry control intended for entering search queries.
Some historical WebKit search field implementations included specialized controls for displaying recent search results.
The ::-webkit-search-results-button pseudo-element was associated with a button used to access those search results.
Unlike ordinary HTML buttons, this control belonged to the browser's internal rendering structure.
Developers could target the internal control with CSS in implementations that exposed the pseudo-element.
Modern browsers do not consistently provide this search results interface, so applying the selector may produce no visible change.
Search Field Controls
WebKit-based search field implementations have used several internal pseudo-elements to represent different parts of a search input.
::-webkit-search-cancel-button- Targets the built-in control used to clear entered search text.::-webkit-search-results-button- Targets a browser-specific button associated with displaying recent search results.::-webkit-search-results-decoration- Targets a search results decoration in implementations that expose it.::-webkit-search-decoration- Targets a browser-provided search decoration associated with the input.
These controls serve different purposes and are not interchangeable.
The clear button removes the current search text, while the historical search results button was associated with accessing previous search queries.
Not every browser exposes these components, and their availability may change between browser versions.
These internal controls are not ordinary HTML elements and should not be treated as a portable foundation for search interface design.
Styling the Results Button
The pseudo-element can be included in a CSS rule to target the browser-specific results button.
input[type="search"] {
width: 260px;
padding: 10px;
border: 1px solid #aaa;
border-radius: 5px;
}
input[type="search"]::-webkit-search-results-button {
display: none;
}The first rule styles the search input itself, including its width, padding, border, and rounded corners.
The second rule requests that the internal search results button be hidden if the browser provides and recognizes it.
This does not remove the search field or prevent users from entering search queries.
Because the results button belongs to the browser's internal interface, support for CSS properties is implementation-dependent.
In browsers without the internal control, the pseudo-element rule has no visible effect.
Example
The following example demonstrates how to style an HTML search field and include a rule targeting the browser-specific search results button.
HTML:
<form action="/search" method="get" role="search">
<label for="site-search">Search the website:</label>
<input type="search" id="site-search" name="q" placeholder="Enter keywords">
<button type="submit">Search</button>
</form>CSS:
input[type="search"] {
width: 260px;
padding: 10px;
font-size: 16px;
border: 1px solid #aaa;
border-radius: 6px;
background: #fff;
}
input[type="search"]:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
input[type="search"]::-webkit-search-results-button {
display: none;
}The search field has a white background, a gray border, and rounded corners.
When the input receives focus, a blue outline identifies the active field.
The WebKit-prefixed rule requests that the browser-specific search results button be hidden if it exists.
The visible Search button is a standard HTML submit button and is not affected by the pseudo-element rule.
In modern browsers that do not expose the internal search results button, the example behaves like an ordinary styled search form.
Note: The form action is an example endpoint. A working search feature requires a corresponding search handler.
Limitations
The ::-webkit-search-results-button pseudo-element has several important limitations.
- It is not defined by a CSS standard.
- It depends on browser-specific internal search field controls.
- Modern browsers may not display the associated results button.
- Its behavior is not consistent across browser engines.
- Support for individual CSS properties is not guaranteed.
- It does not provide a general-purpose search history or autocomplete feature.
For these reasons, developers should avoid relying on this pseudo-element to provide essential search functionality.
It is primarily useful when maintaining older browser-specific stylesheets or understanding historical WebKit search field behavior.
Modern Search Interfaces
Modern search interfaces should use standard HTML controls rather than depending on browser-specific internal search results buttons.
A basic search form can use a search input and a submit button.
<form action="/search" method="get" role="search">
<label for="product-search">Search products:</label>
<input type="search" id="product-search" name="q" required>
<button type="submit">Search</button>
</form>The type="search" attribute identifies the field as a search input.
The required attribute prevents submission when the field is empty.
The submit button provides a consistent way to start a search without depending on a browser-specific results control.
Providing Search Suggestions
For simple predefined suggestions, HTML provides the <datalist> element.
<label for="topic-search">Search CSS topics:</label>
<input type="search" id="topic-search" name="topic" list="css-topics">
<datalist id="css-topics">
<option value="CSS Selectors">
<option value="CSS Flexbox">
<option value="CSS Grid">
<option value="CSS Animations">
</datalist>The list attribute connects the search field to the datalist containing suggested values.
Supporting browsers can display matching suggestions as the user enters text.
The datalist provides suggestions rather than a complete search history feature. Its appearance and keyboard interaction are controlled by the browser.
For more advanced search suggestions, developers can create a custom interface using JavaScript and appropriate accessibility patterns.
These standard approaches are more suitable for modern websites than relying on ::-webkit-search-results-button.
Accessibility Considerations
Search interfaces should remain usable regardless of whether the browser provides internal search controls.
- Provide a visible
<label>identifying the purpose of the search field. - Use a standard HTML submit button for initiating searches.
- Preserve visible keyboard focus indicators.
- Do not rely on browser-specific controls for essential search functionality.
- Ensure that search suggestions can be accessed using a keyboard.
- Give custom controls meaningful accessible names.
- Do not use placeholder text as the only label for a search input.
Because the browser-specific results button may not exist, users should always have another reliable way to submit a search or access available suggestions.
When implementing custom search suggestions, provide appropriate keyboard interaction and communicate suggestion availability to assistive technology users.
Browser Support
::-webkit-search-results-button is a non-standard WebKit-prefixed pseudo-element associated with historical search field controls.
Its practical availability in modern browsers is limited. Even browsers that recognize other WebKit-prefixed search pseudo-elements may not expose a visible search results button.
Firefox does not provide this selector as a standardized mechanism for styling search results controls.
The HTML <input type="search"> element is widely supported, but that does not establish support for this particular pseudo-element.
For current compatibility information, visit Can I Use? and search for HTML search inputs. Compatibility information for the input type should not be interpreted as support for the browser-specific results button.
Specifications
::-webkit-search-results-button is a proprietary browser extension and is not defined as a standardized pseudo-element in a CSS specification.
The HTML search input type is defined in the WHATWG HTML Living Standard .
The HTML specification defines the search input control but does not require browsers to provide a search results button through this WebKit-specific pseudo-element.