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

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/