cssnouislidertether

CSS how to make select option come before a slider?

I am using select library http://github.hubspot.com/select/ and noUiSlider https://refreshless.com/nouislider/. The problem I am facing is shown in the below picture

enter image description here

I have changed the options of "select" with the default style of "select-theme-default.css" and slider is created with the help of "noUislider.js".Slider is in higher z index than options and I want to change that. I tried changing the z-index of ".select-option" class to 5 and tried changing the class of ".noUi-connect" to 2. But it is not working. When I inspect the ".noUi-connect" and remove the z-index property completely it is working to some extent.enter image description here

Solution

  • Try changing the css (Replacing the below css)

    .select.select-theme-default {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    position: relative;
    z-index: 99;
}

    or you can override it

    position: relative; z-index: 99;

    is newly added here