CODEWITHSUNDEEP
google-chromeinputrange
hh54188
hh54188

Reputation: 15626

The chrome <input type='range'> always higher then other html element

suppose I have a simple container which have three element:

<div>
   <span>hello world</span>        
   <input id="ipt" type='test'>
   <input id="rge" type='range'>
</div>

but it show the last #rge always higher then the other two, like this (view in chrome):http://jsfiddle.net/hh54188/SYNPa/1/

Why this happened?How can I solve this problem without adding other html element?just work with css

Upvotes: 2

Views: 309

Answers (1)

Gareth Bowen
Gareth Bowen

Reputation: 949

You should add the following CSS to your #rge definition:

vertical-align:middle;

This aligns the element centred vertically on the line.

Upvotes: 2

Related Questions