Form input padding on chrome not displaying

Question

The styling for my form's input is as follows:

.input{


margin: 15px;
padding-inline-start: 2.75%;
border: 0.5px solid rgba(123, 126, 126, 0.41);
border-radius: 10px;
height: 35px;
width: 75%;

}

padding-inline-start: 2.75%; is meant to add padding to whatever text the user inputs into a field, so the text isn't hitting the edge of the field's border. This works on firefox, but not on chrome and i can't figure out why. thanks

in this screenshot , the text is somewhat indented as you can see. thats what im trying to achieve on chrome and firefox

Answer 1

Have you tried

padding-left: 10px;