I have macbook and i want to remove style of options list mac os style and customize it. How can i do that?
The point is that there is ready dropdown and i need to customize it using only id attribute and css code. (im making bubble.io plugin to customize dropdown list)
`function(instance, properties, context) {
let customDropdown = `
#${properties.dropdown_id}>option {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
#${properties.dropdown_id} {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: url(${properties.arrow}) no-repeat ;
background-size: 15px 15px;
background-position: right 5px center;
}
#${properties.dropdown_id}::before {
top: 0;
left: 15;
content: '${properties.placeholder}';
color: ${properties.placeholder_color};
position: absolute;
display: block;
text-align: center;
background: ${properties.placceholder_bgcolor};
}
/* The container must be positioned relative: */
#${properties.dropdown_id} {
position: relative;
font-family: Arial;
}
#${properties.dropdown_id}>select {
display: none; /*hide original SELECT element: */
}
#${properties.dropdown_id}>selected {
background-color: DodgerBlue;
}
/* Style the arrow inside the select element: */
#${properties.dropdown_id}>selected:after {
position: absolute;
content: "";
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
}
/* style the items (options), including the selected item: */
.select-items div,.select-selected {
color: #ffffff;
padding: 8px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
}
/* Style items (options): */
.select-items {
position: absolute;
background-color: DodgerBlue;
top: 100%;
left: 0;
right: 0;
z-index: 99;
}
/* Hide the items when the select box is closed: */
.select-hide {
display: none;
}
.select-items div:hover, .same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}
`;
instance.data.applyCSS(customDropdown);
}`
I started with this code but its ignoring and putting stock options list like in MacOS