How to style the clear icon of input field

1 
    <input type="search" placeholder="Search">

This markup renders an input field and when user types in it we get a little clear icon at the end. By default, it’s blue-ish color. I want the cross to be white and background to be grey and I want it to be circular as well. How do I do that?

2

i am not sure you can get the icon color - may be or maybe not.

i tried little things, and i ended up getting the background and the roundness, but not the cross color.

input[type = 'search']::-webkit-search-cancel-button{
	color: green;
	background-color: red;
	outline: 1px solid red;
	border: 1px solid red;
	-webkit-appearance: none;	
	height: 10px;
	width: 10px;
/* 	position: absolute;
	right: 0; */
	border-radius: 50%;

}



.input::-webkit-search-cancel-button:after{
	content: "✖️";
	color: green;
/* 	outline: 1px solid red; */
/* 	border: 1px solid red; */
	position: absolute;
	top: 50%;
	left: 50%;
	tranform: translate(-50%, -50%);
}

i think you can only get it not to display at all.

3

You can’t, it’s specific to browser. As @samolex says, you can hide it completely or not hide it, they are the choices. To make a custom clear icon, you’ll need to remove it then overlay a button with your own icon, then when that’s clicked, use JS to clear the input. Much easier to leave as-is

1 Like