CODEWITHSUNDEEP
cssbootstrap-4
Lifewithsun
Lifewithsun

Reputation: 998

Input Field showing background color at the end on iPhone devices

I have website which we are accessing on the iPhone devices where the input fields are showing background color at the end which overlap the input field.

the css which we have configured as

.digit-group input, .otpdigit-group input {         
            -webkit-appearance: none !important;
            -webkit-border-radius: 0;
            -moz-appearance: none !important;
            appearance: none !important;          
            width: 17px;
            height: 17px !important;
            border: none;
            line-height: 17px;
            text-align: center;
            font-size: 13px;
            float: left;
            margin-right: 1px;
            box-shadow: none !important;
        }

But the button doesn't render as expected.

This is how its rendered on iPhone devices. This issue happens only on iphone devices. The OTP text is not shown where background color overlap at the end.

enter image description here

Upvotes: 0

Views: 454

Answers (1)

Brebber
Brebber

Reputation: 3064

Did I understand right: input is type="button?

Maybe ...
Buttons have a native padding if not set to zero. Not only on IPhones.

Please try to add: padding: 0 (!important optional)
... and/or just for testing: set width to width: 30px.

Upvotes: 1

Related Questions