CODEWITHSUNDEEP
phpcss
tmartin314
tmartin314

Reputation: 4171

CSS cursor line size when entering an Input field

I have an image as the background for an input field. I can set the line-height and font-size easily but when you click inside the input, the cursor line is way outside the background image.

Is there a CSS statement (Is that you call them?) that controls this?

Upvotes: 15

Views: 35383

Answers (7)

Ben
Ben

Reputation: 149

the text in input tag can be vertical centered automatically, do not use line-height on it.

Upvotes: -1

Dr I
Dr I

Reputation: 286

Using a line-height: normal or a line-height:inherit did the trick on my side. Thanks for your answers guys.

Upvotes: 0

cjohansson
cjohansson

Reputation: 1103

Problem with using padding is that it is displayed inconsistently in different browsers while line-height in input text areas are displayed equally in IE7, IE8, IE9, Safari, Chrome, Firefox and Opera. It's seems like you have to choose between input cursor or input text vertical alignment.

Upvotes: 3

AlexC
AlexC

Reputation: 9661

Will be good if we have the code , you also can try 

background:url("yourimage") right top no-repeat;
font-size:12px;
padding:5px 5px;
line-height:normal;

depends of your images size

Upvotes: 0

JoshD
JoshD

Reputation: 12814

The post Vertically aligning the text cursor (caret?) in an input box with jQuery, Javascript or CSS may help you.

It seems that your padding size affects the cursor size and position.

Upvotes: 0

Randy the Dev
Randy the Dev

Reputation: 26730

You're probably using line-height to display the text in the input as vertically centered. However, it is also the culprit of your issue. Try experimenting with padding settings of the input instead, while leaving the line-height set to normal.

Upvotes: 24

Khan
Khan

Reputation: 2982

Yes, line-height.

Try:

input {height: 28px; font-size: 10px; padding: 7px 5px;}

Upvotes: 2

Related Questions