Changing Font Size and Margin of Placeholder Text

问题:

I have a text input with some placeholder:

<input type="text" placeholder="placeholder"/>

I would like to make the placeholder text smaller than the input's text:

input {
    font-size: 20px;
}
input:-ms-input-placeholder{
    font-size:5px;
}
input::-webkit-input-placeholder {
    font-size:5px;
}

This works well in Chrome, but IE shrinks the whole input box when the placeholder text is displayed. It then expands the box when I click to type. Here's a fiddle: http://jsfiddle.net/Brn6h/3/

How do I make the input box stay the same size in IE?

回答1:

Giving the input box a width and height does the trick.

input {
        font-size: 20px;
        height: 20px;
        width: 200px;
    }

JSFiddle