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?
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.
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 .
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.
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
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With