app/addons/components/assets/less/styled-select.less

// Licensed under the Apache License, Version 2.0 (the "License"); you may not
// use this file except in compliance with the License. You may obtain a copy of
// the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
// License for the specific language governing permissions and limitations under
// the License.

.styled-select {
  width: 200px;
}

.styled-select label {
  margin: 0;
}

.styled-select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #e6e6e6;
  border: 1px solid #b3b3b3;
  width: 200px;
  text-indent: 4px;
  height: 46px;
  padding-right: 35px;
  color: #333;
}

//bug in firefox for text-indent
@-moz-document url-prefix() {
  .styled-select  select {
    text-indent: 0px;
  }
}

.styled-select select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

.styled-select select::-ms-expand {
  display: none;
}

.styled-select-icon {
  pointer-events: none;
  position: absolute;
  right: 10px;
  top: 12px;
  color: #333;
}

.styled-select-hover-icon {
  pointer-events: none;
  position: absolute;
  right: 10px;
  top: 12px;
  color: @hoverHighlight;
  display: none;
  z-index: 30;
}

//this is a litte css trick to create a hover effect for the triangle. We can't use the normal hover event because we
//need to set pointer-events to none so that a click on the triangle is actually a click on the select dropdown
.styled-select:hover {
  .styled-select-hover-icon {
    display: inline;
  }

  .styled-select-icon {
    display: none;
  }
}