I am getting a problem with some autogenerated class, thi one is from owl carousel and i want to change the nav buttons styles, but i cant because the class

.owl-theme .owl-nav [class*=owl-]

and it has a background that is ruining my background image, but i cant overwrite it because it still the same so i have to delete it, i hope you guys can help me.

I already tried by playing with the displays, backgrounds and that stuff, but what I actually need is to remove that attribute, i tried with js but I wasnt able to

window.onload = () => {
    $('.carruselCheckout').owlCarousel({
        margin: 10,
        items: 1,
        center: true,
        loop: true,
        nav: true,
        mouseDrag: true,
        navText: ['', ''],
        dots: true,
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>


<div >
  <div >
      <img style="height: 120PX;
              width: 280PX;
              object-fit: contain;
          " src="img/bg-img/size-1.png" alt="Alternate Text" />

    </div>

    <div ><h4>2</h4></div>

</div>


<style>
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .carousel-item.active {
        height: 100%;
        width: 100%;
    }

    .owl-prev {
        all: unset;
        padding: 0 !important;
        background-image: url(img/icons8-arrow-32.png) !important;
        height: 15px;
        width: 15px;
        transform: rotate(-90deg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        /* position: absolute;
        margin-top: -70px*/
    }

    .owl-next {
        all: unset;
        padding: 0 !important;
        /*    position: absolute;*/
        background-image: url(img/icons8-arrow-32.png) !important;
        width: 15px;
        height: 15px;
        transform: rotate(90deg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        /*        margin-top: -70px;
        margin-left: 235px;*/
    }
    </style>

Image of what is displayed

Image when i remove the background style

code

CodePudding user response：

It would be helpful if you posted a code snippet so I could play with it, but off the top of my head:

1. Looks like you have a dangling end-bracket — } — in the style code.
2. Do you run into the same issue if you define the style in css/scss?
3. A bit hacky, but if there isn't an obvious work-around, you can use !important in the stylesheet: background-image: url('img/bg-img/size-1.png') !important;

CodePudding user response：

If you want to overwrite/force something in CSS, one way would be to add !important
So something like this:

background: none !important;

CodePudding user response：

I already solved it, intead of using the links of the style for the carousel I copied de code and made it locally and then delete the background property.

.owl-carousel .owl-video-play-icon {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
background: url(owl.video.play.png) no-repeat;
cursor: pointer;
z-index: 1;
-webkit-backface-visibility: hidden;
transition: transform .1s ease

}

.owl-carousel .owl-video-play-icon:hover {
    -ms-transform: scale(1.3,1.3);
    transform: scale(1.3,1.3)
}

so i created two files for the links of the carusel and paste the code that they have, delete the background and that was it, thanks for your help.