Text indent inconsistent for text input and select list on different devices

Question

I have a simple text input and a select list. I'm styling them in a similar way and I need them to have the same text-indent.

If I set the text indent to a px value then they both indent the same amount on my iPhone, however they are different in Chrome. Is there a way of standardizing this cross device and browser?

http://codepen.io/anon/pen/pnvqJ

<input placeholder="Last name" type="text" maxlength="25" name="last_name"  size="60" value="" >
<select name="title">
<option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select>

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

body {
  padding: 0;
  margin: 0;
}

input, select {
  display: block;
  border: none;
  text-indent: 10px;
  width: 100%;
  background: grey;
}

Answer 1

It seems that the select has an inherent minimal indentation of the width of  . Have you considered figuring out the pixel width of NBSP and setting it to be the text-indent of the input in JS?

Answer 2

Just format them separately use one style for select other for input

    *, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

body {
  padding: 0;
  margin: 0;
}

select {
  display: block;
  border: none;
  text-indent: 10px;
  width: 100%;
  background: grey;
}
input{
  display: block;
  border: none;
  width: 100%;
  background: grey;
  text-indent:15px;
}

If it's important to you keep one class for both (which will have a lot of styling inside you can do simply like that

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

body {
  padding: 0;
  margin: 0;
}

input, select {
  display: block;
  border: none;
  text-indent: 10px;
  width: 100%;
  background: grey;
}
input{
  text-indent:15px !IMPORTANT;
}

which basically does the same in this instance. !IMPORTANT means that it will be used even if in other style tag it's already with other value. result in both ways is the same ()

Answer 3

I am not good in designing, still applied some logic, Just add one more class,

select {
  text-indent: 5px !important;
}

Example

I think select element takes more extra indent by default, that is what casing issue, if you are facing this issue only for specific browser, please try to apply this class for those specific browsers only.