Change Color Of The Dots

I want to change the default color background of the dots on inactive or active state. I use Owl Carousel Slider Here's the dots I want to change the color of the dots. I tried th

Solution 1:

Solution to change the color for all dots:

.owl-carouselspan {
    width:10px;
    height:10px;
    margin:5px7px;
    background: blue !important;
    display:block;
    -webkit-backface-visibility:visible;
    -webkit-transition:opacity 200ms ease;
    -moz-transition:opacity 200ms ease;
    -ms-transition:opacity 200ms ease;
    -o-transition:opacity 200ms ease;
    transition:opacity 200ms ease;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;
}

Solution to change the color of an active dot:

.owl-carousel.activespan {
    width:10px;
    height:10px;
    margin:5px7px;
    background: red !important;
    display:block;
    -webkit-backface-visibility:visible;
    -webkit-transition:opacity 200ms ease;
    -moz-transition:opacity 200ms ease;
    -ms-transition:opacity 200ms ease;
    -o-transition:opacity 200ms ease;
    transition:opacity 200ms ease;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;
}

Solution 2:

try

.owl-pagination.owl-pagespan {
    background-color: white;
}
.owl-pagination.owl-page.activespan
{
    background-color: aqua;
}

Solution 3:

This is for Owl Carousel:

.owl-theme.owl-dots.owl-dotspan{
    width:10px;
    height:10px;
    margin:5px7px;
    background: #b71616!important;
    display:block;
    -webkit-backface-visibility:visible;
    -webkit-transition:opacity 200ms ease;
    -moz-transition:opacity 200ms ease;
    -ms-transition:opacity 200ms ease;
    -o-transition:opacity 200ms ease;
    transition:opacity 200ms ease;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;
}

This is Bootstrap Carousel:

.carousel-indicatorsli{
    display:inline-block;
    width:10px;
    height:10px;
    margin:1px;
    text-indent:-999px;
    cursor:pointer;
    background-color: #ff0000!important;
    border:1px solid #fff;
    border-radius:10px;
}

Solution 4:

OWL Carousel, If you want to get rid of dot colors for active and hover state:

.owl-theme.owl-dots.owl-dot {
    -----
    background-color: transparent;
    &.active, &:hover {
        color: $primary-color(your color);

        span {
            background: transparent; 
        }
      }

    span {
        font-size: 2.5rem;
        font-family: $primary-font (your font);
        background: transparent;
    }
}