Cursor is the size of the Input Height

1

I have a form and inside it inputs. HTML:

<input type="text" id="nomeForm" name="nomeForm" onblur="if(this.value=='')this.value='Nome';" onfocus="if(this.value=='Nome')this.value='';" value="Nome">

CSS

.contatoForm input {
    width: 560px;
    height: 60px;
    line-height: 60px;
    font-family:"OpenSansLight";
    font-size: 15pt;
    color: #20253a;
    margin-bottom: 6px;
    padding-left: 20px;
    background-color: #f7f7f8;
    border-radius: 5px;
}

The problem: The cursor, when you click inside the input, gets huge, I do not think it's cool, hehe. This happens in Chrome.

If I use padding-top instead of line-height , it's cool, but I do not know if it would be the best solution.

It has to work on IE8 as well.

    
asked by anonymous 20.08.2014 / 14:49

1 answer

2

A quick and easy solution is to use line-height: normal instead of setting a line size ( original source for this solution here ). I tested it and it worked well in Chrome ( JSFiddle here ).

    
20.08.2014 / 14:58