Custom CSS Input Field issue

Question

Why does my cursor start top right in this example?

See when I click inside the field, it's top right then when I type it moves to the centre. Any ideas why?

HTML:

<label class="input">
    <span>Email address</span>
    <input type="text" />
</label>

CSS:

input, select, textarea {
    line-height:50px;
    width:100%;
    padding-left:20px;
    display: block;
}

.input span {
  position: absolute;
  z-index: 1;
  cursor: text;
  pointer-events: none;
  color: #999;
  /* Input padding + input border */
  padding: 7px;
  /* Firefox does not respond well to different line heights. Use padding instead. */
  line-height: 50px;
  /* This gives a little gap between the cursor and the label */
  margin-left: 2px;
}

.input input, .input textarea, .input select {
  z-index: 0;
  padding: 6px;
  margin: 0;
  font: inherit;
  line-height: 50px;
}

on FF it sits center - but i bet it's how some browsers render the line-height, why aren't you using placeholder="Email"? — DannyTheDev
– DannyTheDev, Commented Nov 19, 2014 at 12:24
input type='email' will do some basic checks to see if the formatting is correct — Billy
– Billy, Commented Nov 19, 2014 at 12:30
Some people are confused with your goal. I guess you are just trying to style the standard input instead of creating your own input. As said by others, there's an issue in the line-height with some browsers. You can use height instead. — Matthijs van Hest
– Matthijs van Hest, Commented Nov 19, 2014 at 13:01

Alex Char · Accepted Answer · 2014-11-19 12:25:47Z

Because of the line-height. Replace it with height:

input,
select,
textarea {
  border: 2px solid $gray-lighter;
  border-bottom: 1px solid $gray-lighter;
  border-top: 1px solid $gray-lighter;
  height: 50px;
  /*replace with height*/
  width: 100%;
  padding-left: 20px;
  background: $white;
  display: block;
}
.input span {
  position: absolute;
  z-index: 1;
  cursor: text;
  pointer-events: none;
  color: #999;
  /* Input padding + input border */
  padding: 7px;
  /* Firefox does not respond well to different line heights. Use padding instead. */
  line-height: 50px;
  /* This gives a little gap between the cursor and the label */
  margin-left: 2px;
}
.input input,
.input textarea,
.input select {
  z-index: 0;
  padding: 6px;
  margin: 0;
  font: inherit;
  height: 50px;
  /*replace height*/
}

<label class="input">
  <span>Email address</span>
  <input type="text" />
</label>

Gibbs · Accepted Answer · 2014-11-19 12:25:37Z

0

Demo

It's because of line-height. try height instead line-height.It works fine

.input input, .input textarea, .input select {
 z-index: 0;
 padding: 6px;
 margin: 0;
 font: inherit;
 height: 50px;
}

answered Nov 19, 2014 at 12:25

Gibbs

23.1k14 gold badges84 silver badges147 bronze badges

Comments

Justinas · Accepted Answer · 2014-11-19 12:28:45Z

0

Just remove line-height from inputs and replace them with padding: 20px 7px;

.input span {
  position: absolute;
  z-index: 1;
  cursor: text;
  pointer-events: none;
  color: #999;
  /* Input padding + input border */
  padding: 7px;
  /* Firefox does not respond well to different line heights. Use padding instead. */
  line-height: 50px;
  /* This gives a little gap between the cursor and the label */
  margin-left: 2px;
}
.input input,
.input textarea,
.input select {
  z-index: 0;
  padding: 6px;
  margin: 0;
  font: inherit;
  padding: 20px 7px;
}

<label class="input">
  <span>Email address</span>
  <input type="text" />
</label>

answered Nov 19, 2014 at 12:28

Justinas

43.9k5 gold badges72 silver badges108 bronze badges

Comments

Billy · Accepted Answer · 2014-11-19 12:42:12Z

0

Whats wrong with this ? Saves mucking around

<label for="emailID">Email Address : </label>
    
    <input type="email" id="emailID" placeholder="Your Email Address"/>

And stylable.

#emailID {width:300px;background-color:green;color:white;border-radius:5px;}

 <label for="emailID">Email Address : </label>
        
        <input type="email" id="emailID" placeholder="Your Email Address"/>

edited Nov 19, 2014 at 12:42

answered Nov 19, 2014 at 12:36

Billy

2,4381 gold badge13 silver badges13 bronze badges

Comments

Varun Chakervarti · Accepted Answer · 2014-11-19 12:45:34Z

0

Here is your updated JSFiddle Link, Check out your issue has been solved or not !!

Changes Made:

.input span {
  padding: 20px;
  line-height: 25px;
}
.input input, .input textarea, .input select {
  padding: 20px;
  height: 25px;
}

edited Nov 19, 2014 at 12:45

answered Nov 19, 2014 at 12:30

Varun Chakervarti

1,0428 silver badges24 bronze badges

1 Comment

Hidden Hobbes Over a year ago

Please ensure to include information in your answer as to what you have done to fix the issue.

Collectives™ on Stack Overflow

Custom CSS Input Field issue

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related