Dropdown menu built on html list - html

Question

I've used some html/scss to build a dropdown/select menu (I need to have full control of how the dropdown menu looks like).
The problem is that:
IE 11 opens the dropdown only when I click the down arrow instead the
whole text
in Safari 10.1.1 the dropdown doesn't hide after
clicking the menu "button" entry
Any help would be quite welcome (answering why it behaves like that would be awesome)
.onclick-menu {
position: relative;
display: inline-block;
padding: 0px;
margin: 0px 0px 1em 0px;
outline-width: 0px;
}
.onclick-menu:focus {
pointer-events: none;
}
.onclick-menu::before {
padding: 5px 10px 5px 10px;
background-color: black;
}
.onclick-menu__date-box {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 42px;
padding: 5px 10px 0px 10px;
border: 1px solid #d2d6d9;
position: relative;
min-width: 160px;
background-color: white;
border-radius: 5px;
}
.onclick-menu__date-box::after {
content: "";
transform: none;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0LjgzIDE2LjQybDkuMTcgOS4xNyA5LjE3LTkuMTcgMi44MyAyLjgzLTEyIDEyLTEyLTEyeiIvPjxwYXRoIGQ9Ik0wLS43NWg0OHY0OGgtNDh6IiBmaWxsPSJub25lIi8+PC9zdmc+");
background-size: cover;
display: inline-block;
position: relative;
right: -90%;
bottom: 33%;
z-index: 100;
min-width: 15px;
width: 15px;
max-width: 15px;
min-height: 11px;
height: 11px;
max-height: 11px;
}
.onclick-menu__label {
font-size: 14px;
line-height: 14px;
margin-bottom: 3px;
}
.onclick-menu-header {
color: #073590;
font-weight: bold;
}
.onclick-menu:focus .onclick-menu-content {
opacity: 1;
visibility: visible;
border: 1px solid #e5e7e8;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.12) 8px 8px 6px 0px;
width: -webkit-fill-available;
}
.onclick-menu-content {
pointer-events: auto;
position: absolute;
top: 38px;
left: -1px;
z-index: 1;
opacity: 0;
visibility: hidden;
transition-duration: 0.5s;
transition-property: visibility;
background-color: black;
width: auto;
border: 5px solid 1px black;
margin-top: 19px;
margin-left: 0px;
padding: 5px 15px 5px 5px;
}
.onclick-menu-content::after {
top: -9px;
border: 10px solid white;
}
.onclick-menu-content::before {
top: -10px;
border-bottom-width: 10px solid #e5e7e8;
}
.onclick-menu__date-selector {
border-style: none;
width: 100%;
z-index: 1000;
min-height: 16px;
-webkit-appearance: none;
background-color: white;
color: #073590;
font-size: 16px;
font-weight: bold;
outline-style: none;
}
.onclick-menu-content li {
list-style-type: none;
white-space: nowrap;
background-color: transparent;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
outline-width: 0px;
cursor: pointer;
padding: 5px 0px 5px 8px;
}
.onclick-menu-content li:hover {
background-color: #e8f4fd;
border-radius: 2px;
border-color: white;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0px;
}
button,
input {
line-height: normal;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"] {
-webkit-appearance: button;
cursor: pointer;
}
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
.onclick-menu-content button {
letter-spacing: 0.03em;
font-weight: bold;
display: block;
width: 100%;
background-color: transparent;
border-style: none;
color: inherit;
cursor: pointer;
outline-width: 0px;
text-align: left;
}
<div tabindex="0" class="onclick-menu__date-box onclick-menu">
<label for="date-select" class="onclick-menu__label">
Take your pick
</label>
<span class="onclick-menu-header">
foo1
</span>
<ul id="date-select" class="onclick-menu-content onclick-menu__date-selector">
<li value="foo1">
<button value="foo1">
foo1
</button>
</li>
<li value="foo2">
<button value="foo2">
foo2
</button>
</li>
<li value="foo3">
<button value="foo3">
foo3
</button>
</li>
</ul>
</div>