Select suitcss

In this example below you will see how to do a Select suitcss with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by AxeLVaisper, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright AxeLVaisper ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Select suitcss</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body{padding:0 45%}

/** @define Select; weak */

:root {
  --Select-color: black;
  --Select-focus-color: var(--Select-color);
  --Select-disabled-opacity: 0.5;
}

.Select {
  position: relative;
}

/**
 * The <select> element
 *
 * 1. Allow overriding the iOS user-agent and hide native arrow in Firefox 35+
 * 2. Can't be changed from `normal` in Firefox
 * 3. Truncate text
 */

.Select-control {
  appearance: none; /* 1 */
  background: transparent;
  border: 1px solid var(--Select-color);
  border-radius: 0;
  box-sizing: border-box;
  color: var(--Select-color);
  cursor: pointer;
  font: inherit;
  line-height: normal !important; /* 2 */
  overflow: hidden; /* 3 */
  padding: 1em 2em 1em 1em;
  text-overflow: ellipsis; /* 3 */
  white-space: nowrap; /* 3 */
  width: 100%;
}

/**
 * The arrow figure. It's optional and can be any element of choice
 */

.Select-figure {
  cursor: pointer;
  height: 1em;
  pointer-events: none;
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
}

/**
 * Remove excess padding and border in Firefox
 */

.Select-control::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Normalize disable state cross-browsers
 */

.Select.is-disabled .Select-control {
  color: var(--Select-color);
  cursor: default;
  opacity: 1;
}

.Select.is-disabled,
.Select:not(.is-disabled) .Select-control:disabled {
  opacity: var(--Select-disabled-opacity);
}

/**
 * Work around for a Firefox/IE bug where changing background color
 * results in a loss of the default focus styles.
 */

.Select-control:focus {
  color: var(--Select-focus-color);
  outline: 1px dotted #212121;
  outline: 5px auto -webkit-focus-ring-color;
}

/**
 * Hide redundant text outline in Firefox
 */

.Select-control:-moz-focusring {
  color: transparent !important;
  text-shadow: 0 0 0 var(--Select-focus-color) !important;
}

/**
 * Fallback to native arrow in IE<10, Opera < 9.6, and Firefox<35.
 * The double selector makes sure it wins over extended theming.
 */

.Select.Select .Select-figure {
  display: none\9;
}

x:-o-prefocus,
.Select.Select .Select-figure {
  display: none;
}

_:-moz-tree-row(hover),
.Select.Select .Select-figure {
  display: none;
}

@supports (filter: blur(0)) {
  _:-moz-tree-row(hover),
  .Select.Select .Select-figure {
    display: block;
  }
}

/**
 * Remove the native arrow and the blue background in IE 10/11+
 */

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  .Select-control::-ms-expand {
    display: none;
  }

  .Select-control:focus::-ms-value {
    background: transparent;
    color: var(--Select-focus-color);
  }
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class="Select">
  <select class="Select-control">
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
  <svg class="Select-figure" viewBox="0 0 2 1.5">
    <polygon points="0,0 2,0 1,1.5" fill="currentColor">
  </svg>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/AxeLVaisper/select-suitcss-PRBEbr */
body{padding:0 45%}

/** @define Select; weak */

:root {
  --Select-color: black;
  --Select-focus-color: var(--Select-color);
  --Select-disabled-opacity: 0.5;
}

.Select {
  position: relative;
}

/**
 * The <select> element
 *
 * 1. Allow overriding the iOS user-agent and hide native arrow in Firefox 35+
 * 2. Can't be changed from `normal` in Firefox
 * 3. Truncate text
 */

.Select-control {
  appearance: none; /* 1 */
  background: transparent;
  border: 1px solid var(--Select-color);
  border-radius: 0;
  box-sizing: border-box;
  color: var(--Select-color);
  cursor: pointer;
  font: inherit;
  line-height: normal !important; /* 2 */
  overflow: hidden; /* 3 */
  padding: 1em 2em 1em 1em;
  text-overflow: ellipsis; /* 3 */
  white-space: nowrap; /* 3 */
  width: 100%;
}

/**
 * The arrow figure. It's optional and can be any element of choice
 */

.Select-figure {
  cursor: pointer;
  height: 1em;
  pointer-events: none;
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
}

/**
 * Remove excess padding and border in Firefox
 */

.Select-control::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Normalize disable state cross-browsers
 */

.Select.is-disabled .Select-control {
  color: var(--Select-color);
  cursor: default;
  opacity: 1;
}

.Select.is-disabled,
.Select:not(.is-disabled) .Select-control:disabled {
  opacity: var(--Select-disabled-opacity);
}

/**
 * Work around for a Firefox/IE bug where changing background color
 * results in a loss of the default focus styles.
 */

.Select-control:focus {
  color: var(--Select-focus-color);
  outline: 1px dotted #212121;
  outline: 5px auto -webkit-focus-ring-color;
}

/**
 * Hide redundant text outline in Firefox
 */

.Select-control:-moz-focusring {
  color: transparent !important;
  text-shadow: 0 0 0 var(--Select-focus-color) !important;
}

/**
 * Fallback to native arrow in IE<10, Opera < 9.6, and Firefox<35.
 * The double selector makes sure it wins over extended theming.
 */

.Select.Select .Select-figure {
  display: none\9;
}

x:-o-prefocus,
.Select.Select .Select-figure {
  display: none;
}

_:-moz-tree-row(hover),
.Select.Select .Select-figure {
  display: none;
}

@supports (filter: blur(0)) {
  _:-moz-tree-row(hover),
  .Select.Select .Select-figure {
    display: block;
  }
}

/**
 * Remove the native arrow and the blue background in IE 10/11+
 */

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  .Select-control::-ms-expand {
    display: none;
  }

  .Select-control:focus::-ms-value {
    background: transparent;
    color: var(--Select-focus-color);
  }
}

Comments