Bring back the cancel icon for search fields

Usually, when defining <input type="search"/>, there is a cancel button to the right of the text field: In Bootstrap, this is overwritten, causing the cancel button to be not visible. This was discussed 4-6 years ago already here https://github.com/twbs/bootstrap/issues/5624. However, now that meanwhile also normalize.css chose to include the cancel icon back (https://github.com/necolas/normalize.css/issues/685) and the cancel icon is now present in every browser, I would suggest to add it back.

I feel like this is too much of an important feature to remove it for style reasons. One alternative I would also consider would be to add a class that would either add the cancel button back or remove the cancel button, if we would decide to change the standard behavior to have the cancel button shown by default.

What do you think? I would implement the change, once we agreed on the details.

[XhmikosR]

Told you I couldn’t find any references 😉

[kcs-shahbajshaikh]

input[type=“search”]::-webkit-search-cancel-button {

/* Remove default */ -webkit-appearance: none;

/* Now your own custom styles / height: 14px; width: 14px; display: block; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC); / setup all the background tweaks for our custom icon */ background-repeat: no-repeat;

/* icon size */ background-size: 14px;

}