Editing input type="search" Pseudo-element Button ('x')
Categories:
Styling the 'x' Button in HTML input type="search"
Fields

Learn how to customize the appearance of the clear button (the 'x') that automatically appears in HTML input type="search"
fields, primarily using WebKit pseudo-elements.
The HTML <input type="search">
element is a convenient way to create search fields, offering built-in features like a clear button (often an 'x' icon) that appears when text is entered. While this functionality is useful, its default styling can sometimes clash with a website's design. This article will guide you through the process of styling this pseudo-element, focusing on WebKit-based browsers which widely support these customizations.
Understanding the WebKit Pseudo-Elements
The clear button in <input type="search">
is not a standard DOM element but rather a pseudo-element rendered by the browser, specifically WebKit-based browsers (Chrome, Safari, Edge, Opera). To target and style this button, you need to use specific WebKit pseudo-elements. The primary pseudo-element for the clear button is ::-webkit-search-cancel-button
.
flowchart TD A[Input type="search"] --> B{"Has Text?"} B -- Yes --> C["::-webkit-search-cancel-button" appears] B -- No --> D["::-webkit-search-cancel-button" hidden] C --> E[Apply CSS to pseudo-element]
Lifecycle of the WebKit search cancel button
Basic Styling of the Clear Button
You can apply various CSS properties to ::-webkit-search-cancel-button
to change its appearance. Common properties include display
, appearance
, background
, color
, width
, height
, and cursor
. By default, the button has a native appearance, which can be reset using appearance: none;
to gain full control over its styling.
/* Reset default appearance and set custom styles */
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none; /* Remove default styling */
appearance: none; /* Standard property for cross-browser compatibility */
/* Custom styling */
background-color: #ff0000; /* Red background */
border-radius: 50%; /* Make it round */
width: 16px;
height: 16px;
cursor: pointer;
/* Optional: Add an 'X' using content property */
content: 'X';
color: white;
font-size: 10px;
line-height: 16px;
text-align: center;
}
CSS to customize the search cancel button
-webkit-appearance: none;
and appearance: none;
for broader compatibility, although the pseudo-element itself is WebKit-specific. This ensures that if other browsers adopt similar pseudo-elements, your reset will apply.Advanced Customization: Replacing the Icon
Instead of using a simple character for the 'x', you can replace the default icon with a custom image or SVG. This is often achieved by setting a background-image
and adjusting background-size
and background-repeat
.
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
/* Remove default content if any */
content: none;
/* Custom icon */
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
background-repeat: no-repeat;
background-position: center;
background-size: 100%; /* Adjust size as needed */
width: 20px;
height: 20px;
cursor: pointer;
opacity: 0.7; /* Make it slightly transparent */
}
input[type="search"]::-webkit-search-cancel-button:hover {
opacity: 1;
}
Replacing the clear button with a custom SVG icon
input type="search"
pseudo-elements is largely a WebKit-specific feature. Firefox and other non-WebKit browsers do not natively support these pseudo-elements for the clear button. For cross-browser consistency, you might need to implement a custom clear button using JavaScript and a standard HTML element, or accept the default browser behavior.Removing the Clear Button Entirely
If you prefer to remove the clear button altogether, you can simply set its display
property to none
.
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none; /* Important for removal */
appearance: none;
display: none; /* Hide the button */
}
CSS to completely hide the search cancel button
By understanding and utilizing these WebKit pseudo-elements, you can effectively integrate the input type="search"
element into your website's design, providing a consistent user experience while leveraging browser-native functionality.