and finally this was the original formatted message
In our case we do it with 3 pieces of css (standard (no box), focused (box with down arrow) and clicked (box with down arrow and left line by the arrow) and the 3 Javascript event handlers you need to flick between the states.
.hdnComboBox { background: transparent;
border-style: none;
border: 1px solid #ffffff;
box-sizing: border-box;
color: #000000;
font-family: 'SegoeUI', 'Segoe UI';
font-size: 1.0rem;
font-weight: 600;
height: 33px;
padding-top:0.5em;
width: 100%;
padding-left: 0.5em;
padding-right: 0.5em;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none; appearance: none;
}
.hdnComboBoxFocused {
background: transparent;
border: 1px solid #a9a9a9;
color: #000000;
box-sizing: border-box;
font-size: 1.0rem;
font-weight:400;
font-family: 'SegoeUI', 'Segoe UI';
height: calc(2.5rem - 2px);
width: 100%;
padding-left: 0.5em;
padding-right: calc(1.6em + 1px);
padding-top:0.5em;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
background: url('../img/DownArrowTransparent.png') no-repeat right #fff;
}
.hdnComboBoxClicked {
background: transparent;
border: 1px solid #a9a9a9;
color: #000000;
box-sizing: border-box;
font-size: 1.0rem;
font-weight:400;
font-family: 'SegoeUI', 'Segoe UI';
height: calc(2.5rem - 2px);
width: 100%;
padding-left: 0.5em;
padding-right: calc(1.6em + 1px);
padding-top:0.5em;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
background: url('../img/DownArrowTransparent2.png') no-repeat right #fff;
}
// this toggles as clicked between the two arrow images as the select options are shown
private onClick(): void {
if (this.comboBoxControl.className="hdnComboBoxFocused"){
this.comboBoxControl.className = "hdnComboBoxClicked";
}
else {
this.comboBoxControl.className="hdnComboBoxFocused";
}
}
private onMouseEnter(): void {
this.comboBoxControl.className = "hdnComboBoxFocused";
}
private onMouseLeave(): void {
this.comboBoxControl.className = "hdnComboBox";
}
and the event handlers (place in init after you've defined the appropriate Div) are:
this.comboBoxControl = document.createElement("select");
this.comboBoxControl.className = "hdnComboBox"; this.comboBoxControl.addEventListener("click",this.onClick.bind(this));
this.comboBoxControl.addEventListener("mouseenter", this.onMouseEnter.bind(this));
this.comboBoxControl.addEventListener("mouseleave", this.onMouseLeave.bind(this));
The images we use are also attached if you want to keep to the standard look and feel.
So I've still lost a bit of formatting but there is a more readable version for anyone else interested.
