How to disable the clear button that IE11 places into textboxes in React Using Styledcomponents Library?

Question

I would like to tell that showing this "clear field" for input elements is IE11 browser behavior. And workaround is to use the following styles :

.rcbInput::-ms-clear {
    display: none;
}

Now , As I am using styledcomponents library in react, How to write pseudo code for this ?

Thanks

Answer 1

This should work for you.

const Input = styled.input`
  ::-ms-clear {
    display: none;
  }
`;