カルーセルを作成しました。インジケーター（カルーセルの下部にあるインジケーター）を、塗りつぶしのない白い中空の円にします。デフォルトでは、それらは長く、長方形で、白です。私はCSSにこれを行うことで、それらを円形で暗くすることができました。
.carousel-indicators > li {
border-radius: 50%;
width: 10px;
height: 10px;
}
.darken {
filter: invert(40%);
}
しかし、私は円に輪郭だけを持ち、塗りつぶしを持たせたくないので、どうすればそれを行うことができますか？color: red実験に追加してみましたが、円の色が変わりません。
あなたがする必要があるのはいくつかのCSSプロパティを上書きすることです。
.carousel-indicators li{
margin-right: 3px;
margin-left: 3px;
background-color: #fff;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
設定background-color:transparentとborder:0ブートストラップスタイルやセットを削除するにはbox-shadowすてきなアウトラインのために。要素がうまく分離されるようにマージンを増やします。
注意：あなたが必要としない!importantあなたのコードでは、それはここでは、このコードで必要とされた一例が動作しませんそれ以外の場合はスニペット。
.carousel-indicators li {
width:10px!important;
height:10px!important;
margin-right:5px!important;
margin-left:5px!important;
border-radius:50%!important;
border:0!important;
background-color:transparent!important;
box-shadow:0 0 0 .2rem rgba(0,0,0,1);
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<div id="carousel-1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active"><img src="https://via.placeholder.com/800x400/007bff/ffffff" class="d-block w-100" alt=""></div>
<div class="carousel-item"><img src="https://via.placeholder.com/800x400/dc3545/ffffff" class="d-block w-100" alt=""></div>
<div class="carousel-item"><img src="https://via.placeholder.com/800x400/28a745/ffffff" class="d-block w-100" alt=""></div>
</div>
<a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
<a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a>
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加