0

After reading this post, I am trying to style the tiny cross icon inside my input search field:

HTML:

  <input class="search-field textfield-closed" type="search" placeholder="Suchen" v-model="state.search">

enter image description here

CSS:

input[type='search']::-webkit-search-cancel-button {
  height: 50px;
  width: 50px;
}

The CSS seems to be applied, at least that is what devtools shows:

enter image description here

but the icon does not change size, nor do any CSS properties have an effect on it. What am I doing wrong?

Edit:

The only property that seems to have an effect is:

-webkit-appearance: none;

which makes it disappear.

Artur Müller Romanov
  • 4,417
  • 10
  • 73
  • 132
  • @Gerard It shows how to `remove` the icon and apply new styles. Any idea, if there's a way to apply styles directly to the icon? – Artur Müller Romanov May 10 '22 at 18:20
  • 1
    There is no "icon". What you think is an icon is a simple background image and can't be styled. Furthermore, the item is basically locked by `-webkit-appearance`. If you don't unlock it, the default shows up and you can't interact with it. If you do unlock it, the default does not apply and you have to provide all necessary CSS for your own version of it. – tao May 13 '22 at 21:37
  • @tao If so, shouldn't there be a way to increase the `background image's` size? The image is fine except that it is displayed way to small. – Artur Müller Romanov May 14 '22 at 07:08
  • 1
    If you try it and it doesn't work, it means it's also locked. The "locking" mechanism is not locking *per-se*. It's actually merging. When `appearance` is set to `auto`, whatever OS rules has for that element are merged onto the styles coming from the page, after the fact, so no matter what you specify in properties which are later overwritten, is overwritten. In this case, the OS is probably applying a `background: ...` which is a composite rule and writes a lot of background related values. – tao May 14 '22 at 10:12
  • 1
    It would be useful if the browser had a way to inspect the applied OS styles (because it would likely give us ways to better control workarounds) but I don't know about any such method/tool. However, I don't think you have a problem here. You should simply set `appearance` to `none` (which means: don't apply OS styles) and provide your own styles. You'd have complete control over the styling. What's your purpose here? – tao May 14 '22 at 10:15
  • Thanks for the explanation. Just wanted to know how it works – Artur Müller Romanov May 16 '22 at 07:32

0 Answers0