如何调整输入标签的高度？

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

在input代码的CSS中，您必须使用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;