Editing input type="search" Pseudo-element Button ('x')

Learn editing input type="search" pseudo-element button ('x') with practical examples, diagrams, and best practices. Covers css, search, input development techniques with visual explanations.

Styling the 'x' Button in HTML input type="search" Fields

Hero image for Editing input type="search" Pseudo-element Button ('x')

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

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

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.