Hi,
I have a few dropdown lists on a page. I've applied a style to the list items so they are a different color. The dropdown looks fine in Windows but not in Macbook.
Windows
Mac
Below is my code; I'm using Asp.net VB. Any ideas on how I can make it look the same on Mac as it does on Windows?
Thank you!
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestDDL.aspx.vb" Inherits="TestDDL" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"/>
<link rel="stylesheet" type="text/css" href="https://mdbootstrap.com/api/snippets/static/download/MDB5-Pro-Advanced_9.0.0/css/mdb.min.css"/>
<link rel="stylesheet" type="text/css" href="https://mdbootstrap.com/api/snippets/static/download/MDB5-Pro-Advanced_9.0.0/plugins/css/all.min.css"/>
<link rel="stylesheet" type="text/css" href="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/css/mdb-plugins-gathered.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Open%20Sans" rel="stylesheet" type="text/css" />
<style type="text/css">
body
{
font-family:Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
margin: 0; padding: 0;
}
*
{
margin: 0;
padding: 0;
}
.dropdown {
list-style: none;
display: inline-block;
min-width: 300px;
-webkit-appearance: none;
}
.dropdown-toggle {
padding: 10px;
text-decoration: none;
background-color: #ffffff;
font-size: 14px;
font-weight:bold;
color: #0B2E6A;
width:200px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-color: transparent;
background-image: url('../images/DDL-Arrow.png');
background-repeat: no-repeat;
background-position: right .7em top 50%;
background-size: 1.2em auto;
}
.dropdown-menu {
margin: 0;
list-style: none;
white-space: nowrap;
border: 1px solid black;
padding: 10px;
background-color: #ffffff;
-webkit-appearance: none;
}
.btn {
padding: 14px 18px;
border: 0 none;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.btn:focus, .btn:active:focus, .btn.active:focus {
outline: 0 none;
}
.btn-primary {
background: #0677BD;
color: #ffffff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open >.dropdown-toggle.btn-primary {
background: #0677BD;
}
.btn-primary:active, .btn-primary.active {
background: #0677BD;
box-shadow: none;
}
.btn-lg.round {
font-size: 2.0rem;
font-family:Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
border-radius:35px;
}
.btn-xl {
padding: 1rem 2rem;
font-size: 2.0rem;
font-family:Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
border-radius:35px;
width:100%;
}
</style>
</head>
<body style="background-color:#0B2E6A;">
<form id="form1" runat="server">
<br /><br />
<div>
<div class="row" style="width:75%;text-align:center;">
<div class="col-md-4">
<asp:DropDownList ID="TypeDropDownList" runat="server" AppendDataBoundItems="true" AutoPostBack="true" CssClass="dropdown-toggle" data-toggle="dropdown" data-bs-toggle="dropdown" data-hover="dropdown">
<asp:ListItem Text="Type 1" Value="0" />
<asp:ListItem Text="Type 2" Value="2" />
<asp:ListItem Text="Type 3" Value="3" />
</asp:DropDownList>
</div>
<div class="col-md-4">
<asp:DropDownList ID="DestinationDropDownList" runat="server" AppendDataBoundItems="true" AutoPostBack="true" CssClass="dropdown-toggle" data-toggle="dropdown" data-bs-toggle="dropdown" data-hover="dropdown">
<asp:ListItem Text="Destination 1" Value="0" />
<asp:ListItem Text="Destination 2" Value="2" />
<asp:ListItem Text="Destination 3" Value="3" />
</asp:DropDownList>
</div>
<div class="col-md-4">
<asp:DropDownList ID="SupplierDropDownList" runat="server" AppendDataBoundItems="true" AutoPostBack="true" CssClass="dropdown-toggle" data-toggle="dropdown" data-bs-toggle="dropdown" data-hover="dropdown">
<asp:ListItem Text="Supplier 1" Value="0" />
<asp:ListItem Text="Supplier 2" Value="2" />
<asp:ListItem Text="Supplier 3" Value="3" />
</asp:DropDownList>
</div>
</div>
</div>
<script src="https://mdbootstrap.com/api/snippets/static/download/MDB5-Pro-Advanced_9.0.0/js/mdb.umd.min.js"></script>
<script src="https://mdbootstrap.com/api/snippets/static/download/MDB5-Pro-Advanced_9.0.0/plugins/js/all.min.js"></script>
<script type="text/javascript" src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/js/plugins/mdb-plugins-gathered.min.js"></script>
</form>
</body>
</html>
