开发者

Input text box scrolling

I currently am having a problem with HTML <input type="text">, as in the Google Chrome browser, if I use the below CSS, when I type text into the box, I am able to highlight the text and drag it up and down, as if it is scrolling a little 2px, due to the text larger than the input box.

Can anyone help me solve my problem, and prevent the dragging to scroll up and down the 2px?

Many thanks!

input {
    border: 0px;
    font-family: 开发者_运维百科"Courier New", Courier, monospace;
    font-size: 13px;
    color: inherit;
    margin: -1px;
    background: none;
}


Specify:

input{ vertical-position:middle; line-height: * your input field height * }

And specifically for IE specify:

 input{ vertical-position:bottom; }

otherwise IE will show the text in the upper part of the input.


input {
    border: 0px;
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    color: inherit;
    margin: -1px;
    background: none;
    line-height:10px
}

reducing the line height should solve your problem. And don't use negative margin on a textbox. If you want to position it, wrap it in a div and then position, else if you doing it with a label, use negative margin for label to pull the input close to it.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜