Just to highlight better how to figure out such kinds of things by ourselves. As shown and mentioned in @UncaughtTypeError answer above
https://stackoverflow.com/a/58484957/7668448
Also in the last section I do go to show how to do different things including changing the color. And with examples.
I loved the answer because it was teaching us how to fish rather than here is the fish
I want to clarify that further for others. Who may didn't notice.
By enabling the show user agent shadow dom
in elements section
of preferences
in devtools
.
Now you'll be able to access the shadow dom
that is created by the agent
(browser engine or browser shortly). In dev tools.
- Get to know how to select the element
- You can manipulate and experiment faster through the dev-tool. And figuring out properties and default values and what doesn't work. (example at the end)
What is shadow dom?
From Mozilla doc Using_shadow_DOM
An important aspect of web components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean. The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element. This article covers the basics of using the Shadow DOM.
You can learn more about it. On the link above.
How to figure out how you would refer to those hidden elements
After enabling showing the agent shadow dom
. Now you can see those hidden dom elements.
Select the element. And check the Styles corresponding selector. As shown by the red box in the illustration above.
input[type="search" i]::-webkit-search-cancel-button {
}
And that's it.
Can test an example below:
https://codepen.io/mohamedlamineallal/pen/JjZmdPv
See before enabling and after enabling the agent dom shadow
.
And for demonstration purposes. You can see, I changed the color using filter
, resize the button with padding
, and repositioned it with margin-right
.
Elements around manipulating the clear button
A great deal with this method is that now you can use the Dev-tool to experiment faster. That includes figuring out what doesn't work at a better speed. Example mask-image
with background-color
. Or pseudo-element .before
.
Things we can figure out:
- to position, we have to use
margin-right
- resize the clear button with padding
- To show and hide we got to use
opacity
appearance
can allow us to hide the default behavior fully. [If we want to disable the default button. We can use appearance: none;
(default: appearance: auto;
)]
- We can see all the default settings
- To replace the button, use background-image with URL no-repeat and center. Also, set the height and width
... that at a fast glimpse.
- Otherwise, if you want to just change the color, you can with using a
filter
with (invert, sepia, saturate, hue, brightness, contrast) as in
filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
(code pen)
You can use the calculator here: 1, 2
You can see the details of that method here (SO answer)
filter: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg">\
<filter id="recolor" color-interpolation-filters="sRGB">\
<feColorMatrix type="matrix" values="\
0 0 0 0 R\
0 0 0 0 G\
0 0 0 0 B\
0 0 0 A 0\
"/>\
</filter>\
</svg>\
#recolor');
read the answer (link).
Reimplement all
And surely if the desired output is more complex. Simply disabling the default behavior and re-implement it fully would be more clean and easy and faster.
Using appearance: none;
will hide and disable the default behavior.
input[type="search" i]::-webkit-search-cancel-button {
appearance: none;
}
You can use position: absolute;
on a span
element to keep the input behavior as outline
on focus (can use padding-right
for not letting text overflow below the button) and you can also use CSS URL for background-image
(SVG icons, you can have utf8 inline encoded SVG where you can change the color, including dynamically if needed) ...
[take keywords, if they make sense check them]
Absolutely: don't use pseudo-element :after
. You can't add a js event listener to it. Using a span is cleaner and faster.
Here are some examples:
The :after
example demonstrate. Using a flex-box system. Hidding input outline and border. And re-implementing them. Could have used that in the span example. use outline: none;
to disable the default outline.
I advise always to use the dom el (span) way.
-ms-clear