CODEWITHSUNDEEP
formsstyling
Evanss
Evanss

Reputation: 23173

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

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;
}

enter image description here

Upvotes: 1

Views: 2062

Answers (3)

Assaf Lavie
Assaf Lavie

Reputation: 76103

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

Upvotes: 0

Laimonas
Laimonas

Reputation: 36

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 (enter image description here)

Upvotes: 1

AK47
AK47

Reputation: 3807

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.

Upvotes: 0

Related Questions