CODEWITHSUNDEEP
htmlcss
michaelmcgurk
michaelmcgurk

Reputation: 6519

Custom CSS Input Field issue

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?

http://jsfiddle.net/2Ltm5adw/

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

Upvotes: 1

Views: 69

Answers (5)

Varun Chakervarti
Varun Chakervarti

Reputation: 1042

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

Upvotes: 0

Billy
Billy

Reputation: 2448

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"/>

Upvotes: 0

Justinas
Justinas

Reputation: 43565

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>

Upvotes: 0

Alex Char
Alex Char

Reputation: 33238

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>

Upvotes: 2

Gibbs
Gibbs

Reputation: 22974

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

Upvotes: 0

Related Questions