Ionic 4 - The clear button of ion-input remains gray

Ionic Framework
1

The clear button color of ion-input remains gray.

I opened a issue on GitHub. Click here.

Anybody can help me?

[Album] Imgur
2

Try put this tag !important in the style!

This sometimes happens because there is some overlapping component!

3

I put this but the bug continue…

4

Hello, Don’t just post image only, add your code, html or what you tried?

5

Hi @gokujy. The informations is here

6

So you want to set background color red?

7

I want to set red in clear icon (clearInput)

8

It’s svg image in clear input icon, if you wish to change color you have to download another svg image and fill color, whatever you want.

1 Like
9

Thanks @gokujy. It’s working.

10

hey @SidiBecker can you share exactly how you swapped out the icon without doing it in the global css.

I’ve tried but it keeps being overwritten for me if i don’t do it in the global css

11

Hy @peyi, I took the original svg and customized only the color. So, I put it in my main.scss file.

Example md and ios:

.input-clear-icon.sc-ion-input-ios {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='rgb%28255,255,255%29'%20d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z%20M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>") !important;
}

.input-clear-icon.sc-ion-input-md {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><polygon%20fill='rgb%28255,255,255%29'%20points='405,136.798%20375.202,107%20256,226.202%20136.798,107%20107,136.798%20226.202,256%20107,375.202%20136.798,405%20256,285.798%20375.202,405%20405,375.202%20285.798,256'/></svg>") !important;
}

The color (RGB) I change in this location of svg:

...<path%20fill='rgb%28[MY_COLOR_HERE]%29'...
1 Like
12

So happy you replied thanks Sidi!

Quick one: Does the color only have to be an SVG?

1 Like
13

You are welcome!

According to my tests, the color must be RGB.