问:如何将复选框垂直居中?在这种特殊情况下,为什么给定所有元素的边距和填充为0,为什么复选框边框和包含元素之间根本没有空白?
屏幕截图:
JSFiddle:http : //jsfiddle.net/TZMF5/2/
HTML:
<div class="category-item">
<span class="input-container">
<input type="checkbox"/>
</span>
</div>
CSS:
.category-item {
display: table;
border: 1px solid #cccccc;
margin: 0;
padding: 0;
}
.category-item .input-container {
display: table-cell;
margin: 0;
padding: 0;
text-align: center;
}
.category-item .input-container input {
margin: 0;
padding: 0;
vertical-align: middle;
}
在SO上也有与此类似的问题。找不到适用于这种情况的答案。谢谢!
与其他输入元素一样,复选框元素也受供应商特定appearance
样式的限制-您可以使用appearance:none
或等替代它。-webkit-appearance:none
但是,这将完全阻止复选框的呈现。
因此,您必须在某种程度上使用默认样式进行“实时处理”并实现一些替代,对于在您给出的示例中的垂直对齐方式,您必须将其“凸显” 1px,例如:
.category-item .input-container input {
margin:-1px 0 1px 0; /* <-- here */
padding: 0;
vertical-align: middle;
}
Gecko(Firefox)使用了-moz-appearance [sic] CSS属性,以基于操作系统主题的平台原生样式来显示元素。
一种解决方法是完全“替换”复选框元素,同时仍保留其功能-可以通过添加一个label
元素然后应用som漂亮的CSS来实现,例如,如下所示:
的HTML
<div class="category-item">
<div class="input-container">
<input class='checkbox' id='checkbox' type="checkbox" />
<label for='checkbox' class='checkbox'></label>
</div>
</div>
的CSS
.category-item {
display: table;
border: 1px solid #cccccc;
margin: 0;
padding: 0;
height:30px;
}
.category-item .input-container {
display: table-cell;
margin: 0;
padding: 0;
text-align: center;
vertical-align: middle;
height:30px;
}
label.checkbox {
position:relative;
vertical-align: middle;
border:1px solid black;
height:10px;
width:10px;
margin:0;
padding:0;
margin:-2px 0 2px 0;
line-height:1em;
padding:0;
overflow:hidden;
display:inline-block;
}
input.checkbox {
appearance:none;
height:0;
width:0;
overflow:hidden;
display:none;
margin:0;
padding:0;
-webkit-appearance:none;
}
input.checkbox:checked +label.checkbox:before {
content:'\2713';
position:absolute;
top:-3px;
font-size:10px;
left:2px;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句