改变旋转木马左/右按钮的颜色

时间:2016-07-08 10:23:38

标签: css twitter-bootstrap

我想改变旋转木马上左右按钮的颜色。我尝试使用背景颜色,但不起作用。我该如何改变呢?

这是我的轮播代码:

<div id="myCarousel" class="carousel slide">
                    <div class="carousel-inner">
                        <div class="item active">
                            <div class="col-xs-4"><a href="#"><img src="<?php bloginfo('template_url');?>/images/html_brand.jpg" class="img-responsive"></a></div>
                            <div class="col-xs-4"><a href="#"><img src="<?php bloginfo('template_url');?>/images/css_brand.jpg" class="img-responsive"></a></div>
                            <div class="col-xs-4"><a href="#"><img src="<?php bloginfo('template_url');?>/images/js_brand.jpg" class="img-responsive"></a></div>
                        </div>
                        <div class="item">
                            <div class="col-xs-4"><a href="#"><img src="<?php bloginfo('template_url');?>/images/jq_brand.jpg" class="img-responsive"></a></div>
                            <div class="col-xs-4"><a href="#"><img src="<?php bloginfo('template_url');?>/images/json_brand.jpg" class="img-responsive"></a></div>
                            <div class="col-xs-4"><a href="#"><img src="<?php bloginfo('template_url');?>/images/wp_brand.jpg" class="img-responsive"></a></div>
                        </div>

                    </div>

                    <!-- Controls-->
                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>

                </div>

3 个答案:

答案 0 :(得分:4)

更改此选择器的颜色属性:

.carousel-control {
  color: #bada55;
}

答案 1 :(得分:2)

默认箭头是基于文本的图标的字形。更改他们的color财产。

例如

.glyphicon.glyphicon-chevron-right{
   color:red;
}

答案 2 :(得分:1)

添加以下css

<style>
    .carousel-control.right{ opacity:1 !important;color:red;}
</style>