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>

我怎麼在這裏的目標？有人能告訴我如何改變它的背景嗎？

謝謝。

來源

2017-05-27 hemoglobin

.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>

來源

2017-05-29 06:59:05

如果我想自定義的複選標記，即從像字體真棒圖標字體？我怎樣才能做到這一點？ – olefrank

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

來源

2017-05-27 22:16:18

您只需剛剛覆蓋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>

來源

2018-01-21 15:54:48 xamDev

Style Bootstrap 4自定義複選框

回答

相關問題