css - 如何在 twitter bootstrap 中设置输入复选框的样式？

Question

我必须使输入复选框变得简单，但在引导程序中找不到某种可选类，还在 github 上搜索了一些库，但找不到像制作基础这样简单的东西。

感谢帮助。

Answer 1

您可以使用它来了解可以做什么：

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
@import url(//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css');

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

.custom-check {
		display: inline-block;
		width: 25px; height: 25px;
		background: white;
		border: 1px solid #CCCCCC;
		font-family: 'Glyphicons Halflings';
		font-size: 22px;
		line-height: 1;
	}

.custom-check::before {
  content: "\e013";
  color: #424242;
  display: none;
}

input[type=checkbox]:checked+.custom-check::before {
  display: block;
  color: white;
  background-color: #554236;
}

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<div>
  <label >
    <input type="checkbox">
    <span class="custom-check"></span>
    My Checkbox
  </label>
</div>

如果这还不够，这个对类似问题的回答也很好地概述了自定义引导复选框所涉及的 css。

Answer 2

只需向该输入元素添加一个 id（如果它只是一个复选框）或类并为其定义 css：

CSS 和 HTML

'customId' 将是您提供给自定义输入标签的 ID：

<input id="customId" />

input#customId{
   background: #888 !important;
   border: none !important;
   color: #000 !important;
}

jsut覆盖你想要的任何样式......

重要提示：只需在样式末尾添加 !important 即可强制覆盖