Как отрегулировать высоту для входного тега?

Question

У меня есть список радио-кнопки с метким отведенными им:

<input id="iphone" type="radio" name="mobilephone" value="iPhone4"> 
<label for="iphone">iPhone 4</label> 

Но я удалил стандартные радио-кнопку и заменить его с моим собственным .png:

input[type="radio"]{ 
    display: none; 
} 

input[type="radio"]+label{ 
    background: url('../img/empty.png') left center no-repeat; 
    padding-left: 45px; 


} 

input[type="radio"]:checked+label{ 
    background-image: url('../img/filledout.png'); 
} 

Но изображение слишком велико, поэтому граница вырезается. Он изменяется только в том случае, если размер текста больше, поэтому на картинке больше места для отображения.

Как установить высоту входа?

Независимо от того, насколько большой текст получен, минимальный размер ввода должен быть таким же высоким, как и изображение!

Answer 1

В CSS для input тега, вы должны явно указать height и width атрибуты радио-кнопки, с помощью px или em единиц. Вы должны установить его на максимальный размер, необходимый для изображения. Хороший демо вы можете использовать:

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/

Answer 2

Вы можете изменить размер фона, набрав:

background-size:10% (for example 10%) 

или:

background-size:10px 10px;