Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS cursor line size when entering an Input field

Tags:

css

php

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?

like image 819
tmartin314 Avatar asked Oct 01 '10 22:10

tmartin314


People also ask

How do you change caret size in CSS?

By default the caret height will take the font height, the only time it will not, is when the line height is specified then it will take this height. So if you want to modify the caret height you can do it through font-size or through line height if you don't want to change the font size.

How do you make a custom cursor in CSS?

Answer: Use the CSS cursor property You can define a custom cursor using the CSS cursor property. The cursor property takes the comma-separated list of user-defined cursors value followed by the generic cursor. First of all create cursor image and save it with the extension .

How do you style the value of an input?

Styling Input Fields If you only want to style a specific input type, you can use attribute selectors: input[type=text] - will only select text fields. input[type=password] - will only select password fields. input[type=number] - will only select number fields.


1 Answers

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.

like image 91
Randy the Dev Avatar answered Oct 09 '22 13:10

Randy the Dev