Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about how to adjust the input cursor size in input and be compatible with mainstream browsers. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

I encountered a problem in the project.

The input input box is simulated with a background image, setting the height of height and line-height to the same height, so that the input text inside can be centered, as shown below:

What happens under FF is that when you click input, the input cursor is actually as high as the height of input, but when you start typing text, the cursor becomes as high as the text

The cursor under chrome is as high as the height of input.

Under IE, the cursor is the same size as the text.

The preliminary conclusions are as follows:

IE: whether the line has text or not, the cursor height is the same as font-size.

FF: when the line has no text, the cursor height is the same as the height of input. When the line has text, the cursor height is the same as font-size. (the latest version seems to be the same as ie)

Chrome: when the line has no text, the cursor height is the same as line-height; when the line has text, the cursor height is from the top of the input to the bottom of the text (both cases are when line-height is set), if there is no line-height, it is the same as font-size.

Solution:

1. Set a small height for the height of input, and then fill it with padding, which can basically solve the problem of all browsers

The code is as follows:

Input {

Height: 16px

Padding: 4px 0px

Font-size: 12px

}

2, just give it to IE line-height.

The code is as follows:

-ms-line-height:40px

After reading the above, do you have any further understanding of how to resize the input cursor in input and be compatible with mainstream browsers? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.