Hiding drop-down menu items in the Safari and IE is not possible using just CSS, the items must be removed by javaScript.
Question was asked on StackOverflow.
In this example body tag has class user-id
var grujicFormID;
/*Milan Grujic user-id-3*/
grujicFormID = ['1060', '1063'];
function hideDatabaseEmail(userID, hideForm){
if (document.querySelector("body").classList.contains(userID)) {
const sel = document.querySelector("select[name=fid]");
const options = [...document.querySelectorAll("select[name=fid] option")].filter(opt => !hideForm.includes(opt.value));
if (sel.options.length > options.length) {
sel.options.length=0; /* remove all */
options.forEach(opt => sel.append(opt));
}
}
}
hideDatabaseEmail('user-id-3', grujicFormID);
!hideForm.includes(opt.value));
Hides all items specified in the var grujicFormID.
If we remove ! and save
hideForm.includes(opt.value));
All the items except ones within grujicFormID will be removed from menu.