How to fix Input styles on IOS?

Question

css

Hello.

There are several inputs for displaying the data of the selected range of numbers in the filter. These Inputs have type="text" and work with the RD Range plugin, with a dynamically generated block width.

For Windows and Android, everything is perfectly styled.

On the iPhone, only paddings are processed. And not only in Safari, but also in any other browser. There is a feeling that in general the width of these inputs is set by the iPhone as a standard. At the same time, other inputs in the filter are displayed normally even on iPhones.

-webkit-appearance: none doesn't help.
Does not react to max-width / min-width.

How to overcome it?

I am attaching screenshots.
This is how it looks on iPhone - screenshot1
And this is how it looks on Android (everything was stylized normally) -screenshot2

I would be glad for any help. I hope for Makovtsev. Thanks in advance.

Answer 1

First, you have this:

.ios .rd-range-input {
  max-width: 45px;
}

And secondly, the input is wrapped in flex, so you need to add flex-shrink: 0 to it, then the width increases as it should: