jQuery Mobile Selectmenu overlayTheme Option

Last Updated : 26 Jan, 2022

jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops.

In this article, we will be using the jQuery Mobile Selectmenu overlayTheme option to set the color of the overlay layer for the dialog-based custom select menus and the outer border of the smaller custom menus. This option accepts values from alphabets a-z that maps to the swatches included in the theme. By default, the content block colors for the overlay will be inherited from the parent of the select.

Syntax:

Initializing the selectmenu with the overlayTheme option.

$( ".selector" ).selectmenu({
overlayTheme: "b"
});

Setting the overlayTheme option.

$( ".selector" ).selectmenu("option", "overlayTheme", "b");

Getting the overlayTheme option.

var shadow = $( ".selector" )
    .selectmenu( "option", "overlayTheme" );

CDN Link: First, add jQuery Mobile scripts needed for your project.

<link rel=”stylesheet” href=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css”>
<script src=”//code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js”></script>

Example: This example describes the jQuery Mobile Selectmenu overlayTheme option.

HTML

<!doctype html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport"          
          content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" 
          href= 
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css"> 
    <script src= 
"//code.jquery.com/jquery-3.2.1.min.js"> 
    </script> 
    <script src= 
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <div data-role="page"> 
            <h1 style="color:green;"> 
                GeeksforGeeks 
            </h1> 
            <h3>jQuery Mobile Selectmenu overlayTheme Option</h3> 
            <div role="main" class="ui-content"> 
                <label for="GFG" class="select"> 
                    GeeksforGeeks Courses: 
                </label> 
                <select name="GFG" id="GFG" data-native-menu="false"> 
                    <option value="C"> 
                      C Programming 
                    </option> 
                    <option value="CPP"> 
                      C++ Programming 
                    </option> 
                    <option value="JAVA"> 
                      Java Programming 
                    </option> 
                    <option value="overnight"> 
                      Python Programming 
                    </option> 
                    <option value="WEB"> 
                      Web Development 
                    </option> 
                </select> 
            </div> 
            <input type="button" id="Button" 
                   value="Value of the overlayTheme option"> 
            <div id="log"></div> 
        </div> 
    </center> 
    <script> 
        $(document).ready(function () { 
            $("#GFG").selectmenu({ 
                overlayTheme: "b" 
            }); 
            $("#GFG").selectmenu("option", "overlayTheme", "b"); 
            $("#Button").on('click', function () { 
                var a = $("#GFG").selectmenu("option", "overlayTheme"); 
                $('#log').html(a); 
            }); 
        }); 
    </script> 
</body> 
  
</html>