CSS ::-webkit-search-cancel-button Pseudo-Element

The ::-webkit-search-cancel-button pseudo-element is a non-standard CSS extension used to target the built-in clear button of an HTML <input type="search"> element in supported WebKit and Blink-based browsers. This button typically appears when the search field contains text and allows users to clear the entered value without deleting it manually.

Syntax

input[type="search"]::-webkit-search-cancel-button {
  appearance: none;
}

The selector targets the browser-provided clear button associated with an HTML search input.

The input[type="search"] selector identifies search fields, while ::-webkit-search-cancel-button targets their internal clear control.

The -webkit- prefix identifies a browser-specific extension rather than a standardized CSS pseudo-element.

The appearance: none declaration requests removal of the clear button's native appearance. Its exact effect depends on the browser implementation.

How It Works

The HTML <input type="search"> element provides a text-entry control intended for search queries.

Some browsers display a built-in clear button inside the search field when the user enters text.

The clear button is commonly represented by a small X-shaped icon near the end of the input.

When activated, the button clears the search field's current value.

The ::-webkit-search-cancel-button pseudo-element allows CSS to target this browser-provided control in supported implementations.

The pseudo-element does not create the button. It only targets an existing internal control when the browser provides one.

The Search Field Clear Button

A basic HTML search field can be created using the type="search" attribute.

<label for="site-search">Search the website:</label>
<input type="search" id="site-search" name="search" placeholder="Enter keywords">

When a user enters text, supported browsers may display a clear button inside the input.

Activating this button removes the entered text while keeping the search field available for another query.

The button's appearance and visibility depend on the browser and operating system.

Some browsers display the control only while the field contains text, while others may use different conditions or omit the control entirely.

A standard <input type="text"> element does not automatically provide the same search-specific clear control.

Styling the Clear Button

The ::-webkit-search-cancel-button pseudo-element can be targeted with CSS to request changes to the clear button's appearance.

input[type="search"] {
  width: 260px;
  padding: 10px;
  border: 1px solid #aaa;
  border-radius: 5px;
}
input[type="search"]::-webkit-search-cancel-button {
  cursor: pointer;
}

The first rule styles the search field itself, including its width, padding, border, and rounded corners.

The second rule requests a pointer cursor when the user moves over the clear button.

Because the clear button is part of the browser's internal user interface, support for individual CSS properties is limited and implementation-dependent.

Properties that work on ordinary HTML elements may not affect the clear button in the same way.

For consistent appearance, use native styling where possible or provide a separate HTML button when detailed customization is required.

Hiding the Clear Button

The built-in clear button can be hidden in supporting browsers using display: none.

input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

This rule removes the browser-provided clear control from the search field's visual presentation in implementations that support the selector.

It does not prevent users from entering, editing, or deleting text manually.

However, removing the clear button also removes a convenient way to clear the field with a single action.

Hiding the native control may be appropriate when a separate, accessible clear button is provided, but it is generally better to preserve useful native functionality when possible.

The rule does not affect browsers that do not recognize the pseudo-element.

Example

The following example creates a search field with custom input styling while retaining its browser-provided clear button.

HTML:

<label for="product-search">Search products:</label>
<input type="search" id="product-search" name="products" placeholder="Search products">

CSS:

input[type="search"] {
  width: 260px;
  padding: 10px 12px;
  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-cancel-button {
  cursor: pointer;
}

The search field has a white background, a gray border, and rounded corners.

When the field receives keyboard focus, a blue outline helps users identify the active control.

In supported browsers, entering text may cause the built-in clear button to appear.

The pseudo-element rule requests a pointer cursor over that control without removing its native appearance.

Activating the clear button removes the entered search text.

The clear button may look different across browsers because its visual design is controlled by the browser and operating system.

Custom Clear Buttons

When a search interface requires a consistently styled clear button across browsers, developers can create a separate HTML button rather than relying entirely on the browser's internal control.

A custom clear button should use a real <button type="button"> element and provide an accessible name.

HTML:

<label for="custom-search">Search:</label>
<div class="search-wrapper">
  <input type="search" id="custom-search" placeholder="Enter keywords">
  <button type="button" id="clear-search" aria-label="Clear search">Clear</button>
</div>

CSS:

.search-wrapper {
  display: flex;
  gap: 8px;
  align-items: center;
}
.search-wrapper input {
  width: 220px;
  padding: 8px;
  border: 1px solid #aaa;
  border-radius: 5px;
}
.search-wrapper button {
  padding: 8px 12px;
  border: none;
  border-radius: 5px;
  background: #0066cc;
  color: #fff;
  cursor: pointer;
}
.search-wrapper button:hover {
  background: #004c99;
}
.search-wrapper button:focus-visible {
  outline: 2px solid #004c99;
  outline-offset: 2px;
}
#custom-search::-webkit-search-cancel-button {
  display: none;
}

JavaScript:

const searchInput = document.getElementById("custom-search");
const clearButton = document.getElementById("clear-search");

clearButton.addEventListener("click", function() {
  searchInput.value = "";
  searchInput.dispatchEvent(new Event("input", { bubbles: true }));
  searchInput.focus();
});

When the user activates the Clear button, JavaScript removes the search text, dispatches an input event, and returns focus to the search field.

The input event allows other code listening for search-field changes to respond to the cleared value.

The WebKit-prefixed rule hides the native clear control in supporting browsers to avoid displaying two clear buttons.

Browsers that do not recognize this rule may still display their own clear control, so test the interface across browsers before relying on this approach.

Unlike the browser's internal clear button, the custom HTML button can be styled using ordinary CSS properties.

Accessibility Considerations

Search fields and their clear controls should remain accessible to keyboard users, assistive technology users, and people using different input methods.

Provide a visible <label> that identifies the purpose of the search field.
Preserve the browser's built-in clear functionality unless there is a specific reason to replace it.
Ensure that custom clear buttons can be activated using a keyboard.
Give custom icon-only buttons an accessible name, such as aria-label="Clear search".
Maintain a visible focus indicator for the search field and custom buttons.
Use a sufficiently large clickable area for custom controls.
Do not rely on placeholder text as the only label for a search field.

The browser-provided clear button may have platform-specific keyboard and accessibility behavior. Replacing it with a custom control makes the developer responsible for providing appropriate interaction and accessibility.

When a custom clear button is activated, returning focus to the search field can help users continue entering a new query.

Browser Support

::-webkit-search-cancel-button is a non-standard browser-specific pseudo-element associated with search inputs in WebKit and Blink-based browsers, including Safari, Chrome, and Edge.

Firefox does not provide this WebKit-specific selector as a standardized way to style its search controls.

The availability, appearance, and behavior of the built-in clear button depend on the browser and operating system.

Support for HTML <input type="search"> does not guarantee support for this pseudo-element or for particular CSS properties applied to it.

For current compatibility information, visit Can I Use? and search for HTML search inputs. General search input support does not establish support for this particular pseudo-element.

Specifications

::-webkit-search-cancel-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 specification defines the behavior of search inputs but does not require browsers to expose a clear button through this WebKit-specific pseudo-element.