web-dev-qa-db-ja.com

スタイルBootstrap 4カスタムチェックボックス

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>

ここで何をターゲットにしますか？誰かがその背景を変更する方法を教えてもらえますか？

ありがとうございました。

htmlcsstwitter-bootstrapbootstrap-4
9
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>
8
Malathy Venkatesan

それは私のために働いた

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: #caca4c;
}
.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    background-color: #caca4c;
}
8
manuxi

単に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>
3
xamDev

Olefrankと同じ質問があります。別の画像を使用したい。たとえば、イントラネットのフォームページで、お気に入りのフォームを示すために、ユーザーにチェックボックスの代わりに星を選択してほしい。画像で動作するようにしましたが、Bootstrap 4ドキュメントで指定されたマークアップを使用しました：

<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

そして、次のCSS：

.custom-checkbox .custom-control-label::before {border-color: transparent; background-color: transparent;}
.custom-checkbox .custom-control-label::after {background-image: url(five-pointed-star.svg); background-size: 100%;}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {border-color: transparent; background-color: transparent;}
.custom-checkbox .custom-control-input:checked~.custom-control-label::after {background-image: url(five-pointed-star-selected.svg); background-size: 100%;}

しかし、残念ながら私のスキルの範囲を超えて、Webフォントを使用して代替画像を指定する方法を知りたいです！

0
murphyme