スタイルブートストラップ4カスタムチェックボックス

ブートストラップ4でカスタムチェックボックスのスタイルを設定するにはどうすればよいですか？私はすべてを試しましたが、背景色を変更することすらできません。スタイルブートストラップ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/それは良いfeturesをたくさん持っています。

出典

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

スタイルブートストラップ4カスタムチェックボックス

答えて

関連する問題