Style Bootstrap 4自定义复选框

问题描述：

如何设置Bootstrap 4中的自定义复选框？我尝试了一切，但我甚至无法改变它的背景颜色。Style Bootstrap 4自定义复选框

这是我的代码大纲：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<label class="custom-control custom-checkbox"> 
 
     <input type="checkbox" class="custom-control-input"> 
 
     <span class="custom-control-indicator"></span> 
 
     <span class="custom-control-description">Check this custom checkbox</span> 
 
</label>

我怎么在这里的目标？有人能告诉我如何改变它的背景吗？

谢谢。

答

.custom-control{ 
 
    background-color: grey; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<label class="custom-control custom-checkbox"> 
 
     <input type="checkbox" class="custom-control-input"> 
 
     <span class="custom-control-indicator"></span> 
 
     <span class="custom-control-description">Check this custom checkbox</span> 
 
</label>

如果我想自定义的复选标记，即从像字体真棒图标字体？我怎样才能做到这一点？ – olefrank

答

使用Icheck http://icheck.fronteed.com/它有很多好的提示。

答

您只需刚刚覆盖custom-control-indicator风格。

尝试如下

<!DOCTYPE html> 
 
<html> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 
<style> 
 
.custom-control-input:checked~.custom-control-indicator{ 
 
color:white; 
 
background-color:red; 
 
} 
 
</style> 
 
<body> 
 

 
<label class="custom-control custom-checkbox"> 
 
     <input type="checkbox" class="custom-control-input"> 
 
     <span class="custom-control-indicator"></span> 
 
     <span class="custom-control-description">Check this custom checkbox</span> 
 
</label> 
 
</body> 
 

 
</html>

Style Bootstrap 4自定义复选框

相关推荐