1 year ago

Making Select Elements styled with CSS clickable

Category: CSS

For several projects we needed to style select elements with CSS in order to make them integrate with the rest of the CI. There is a very comprehensive, but old article about that at 456bereastreet.com. Fortunately this can nowadays easily be acchieved using CSS (for most form elements).

However we stumbled over problems with dropdowns / select elements when the little arrow on the right was clicked - mouse clicks did not properly fire and make the select drop down.


.select-element-wrapper {
    position: relative;
    display: inline-block;
    &:after {
      content: "\f107";
      display: block;
      position: absolute;
      right: 14px;
      top: 11px;
      font-size: 15px;
      pointer-events:none;
    }
}

Including the


__pointer-events:none;__

solved the problem for most browsers.

How to make a custom select element clickable

Note: If you need your select to work in IE 10 and below, you have to use either conditional comments or a library like Modernizr to hide the :after element, IE10 and below don't support the pointer-events property.

  • This article is my 12th oldest. It is 150 words long.