Question

我必须使输入复选框变得简单，但在bootstrap中找不到某种可选类，也在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>

如果这还不够，这个类似问题的answer也可以很好地概述自定义引导程序复选框所涉及的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添加到样式的末尾以强制覆盖

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

2 个答案: