How to hide option in drop down menu?-CodePudding

I'm trying to hide the "Select Value" option in the drop down menu of a plugin I have for my wordpress, I've tried the following code:

div.calc-drop-down-box.calc_dropDown_field_id_0 {
    
            visibility: hidden !important;

}

But this doesn't work. What am I doing wrong?

CodePudding user response：

Try this:

.calc-drop-down.ccb-appearance-field.ccb-field option:first-child {
  display: none;
}

It gets the first child of type 'option' and hides it from the dropdown https://jsfiddle.net/shn5dcmu/1/

CodePudding user response：

You can use the jQuery click() method in combination with the on() method to hide the dropdown menu when the user click outside of the trigger element.

here is the example code

<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Hide Dropdown on Click Outside</title>
<style>
    ul{
        padding: 0;
        list-style: none;
        background: #f2f2f2;
    }
    ul li{
        display: inline-block;
        position: relative;
        line-height: 21px;
        text-align: left;
    }
    ul li a{
        display: block;
        padding: 8px 25px;
        color: #333;
        text-decoration: none;
    }
    ul li a:hover{
        color: #fff;
        background: #939393;
    }
    ul li ul.dropdown-menu{
        min-width: 100%; /* Set width of the dropdown */
        background: #f2f2f2;
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
    }
    ul li ul.dropdown-menu li{
        display: block;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        // Show hide popover
        $(".dropdown").click(function(){
            $(this).find(".dropdown-menu").slideToggle("fast");
        });
    });
    $(document).on("click", function(event){
        var $trigger = $(".dropdown");
        if($trigger !== event.target && !$trigger.has(event.target).length){
            $(".dropdown-menu").slideUp("fast");
        }            
    });
</script>
</head>
<body>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li >
            <a href="#">Products ▾</a>
            <ul >
                <li><a href="#">Laptops</a></li>
                <li><a href="#">Monitors</a></li>
                <li><a href="#">Printers</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</body>
</html>