I am facing some challenges with setting CSS properties for jQuery-UI widgets, especially the SelectMenu. Basic styling like margins does not seem to work, and I am struggling to assign different CSS styles to two separate SelectMenu widgets. Here is a simplified version of my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JQuery Select Option</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script>
$(function () {
$("#currency_selector").selectmenu();
$("#currency_selector2").selectmenu();
});
</script>
<style>
label {
display: inline-block;
}
.ui-widget {
display: inline-block;
overflow: hidden;
color: black;
background-color: white;
}
.ui-selectmenu-open {
max-height: 180px;
overflow-y: scroll;
}
.fieldSpace {
margin-top: 10px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div>
<label for="currency_selector">Currency:</label><br>
<select id="currency_selector" class="fieldSpace"><br>
<option disabled>Popular Currencies</option>
<option value="EUR">Euro (€)</option>
<option value="USD">US Dollar ($)</option>
<option value="GBP">UK Pound Sterling (£)</option>
</select>
<br><br>
<label for="currency_selector2">Currency:</label><br>
<select id="currency_selector2" class="fieldSpace"><br>
<option disabled>Asian Currencies</option>
<option value="SGD">Singapore Dollar ($)</option>
<option value="MYR">Malaysian Rinngit (RM)</option>
<option value="IDR">Indonesian Rupiah (R)</option>
</select>
</div>
</body>
</html>- Can I apply different background colors to the two selectors?
- Is there a way to hide the scroll bars?
- Why isn't it recognizing the fieldSpace class that defines the margins?
Appreciate any help.