SImple select

by Jean-Baptiste Audras

HTML

<label for="select-1">Select 1</label>
<select id="select-1">
  <option value="">Select a country...</option>
  <option value="AF">Afghanistan</option>
  <option value="AX">&Aring;land Islands</option>
  <option value="AL">Albania</option>
  <option value="DZ">Algeria</option>
  <option value="AS">American Samoa</option>
  <option value="AD">Andorra</option>
  <option value="AO">Angola</option>
  <option value="AI">Anguilla</option>
  <option value="AQ">Antarctica</option>
  <option value="AG">Antigua and Barbuda</option>
  <option value="AR">Argentina</option>
  <option value="AM">Armenia</option>
  <option value="AW">Aruba</option>
  <option value="AU">Australia</option>
  <option value="AT">Austria</option>
  <option value="AZ">Azerbaijan</option>
  <option value="BS">Bahamas</option>
  <option value="BH">Bahrain</option>
  <option value="BD">Bangladesh</option>
  <option value="BB">Barbados</option>
  <option value="BY">Belarus</option>
  <option value="BE">Belgium</option>
  <option value="BZ">Belize</option>
  <option value="BJ">Benin</option>
  <option value="BM">Bermuda</option>
  <option value="BT">Bhutan</option>
  <option value="BO">Bolivia, Plurinational State of</option>
  <option value="BA">Bosnia and Herzegovina</option>
  <option value="BW">Botswana</option>
  <option value="BV">Bouvet Island</option>
  <option value="BR">Brazil</option>
  <option value="IO">British Indian Ocean Territory</option>
  <option value="BN">Brunei Darussalam</option>
  <option value="BG">Bulgaria</option>
  <option value="BF">Burkina Faso</option>
  <option value="BI">Burundi</option>
  <option value="KH">Cambodia</option>
  <option value="CM">Cameroon</option>
  <option value="CA">Canada</option>
  <option value="CV">Cape Verde</option>
  <option value="KY">Cayman Islands</option>
  <option value="CF">Central African Republic</option>
  <option value="TD">Chad</option>
  <option value="CL">Chile</option>
  <option value="CN">China</option>
  <option...

SCSS

$blue      : rgb(38, 132, 255);
$grey      : rgb(204, 204, 204);
$greyLight : rgb(230, 230, 230);
$greyDark  : rgb(179, 179, 179);
$heading   : #253858;

body {
	font-family: Roboto,-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,sans-serif;
	color: #253858;
}

label {
	position: relative;
	display: inline-block;
	font-weight: 600;
	margin: 0 0 8px 0;
	touch-action: manipulation;
}
.wpgb-select {
	position: relative;
	max-width: 550px;
	margin-bottom: 36px;
}
.wpgb-sr-only {
	position: absolute;
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
    opacity: 0.01;
    white-space: nowrap;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
}
.wpgb-select {

    display: flex;
	flex-wrap: wrap;
	align-items: center;
    min-height: 38px;
    position: relative;
    box-sizing: border-box;
    border-color: $grey;
    border-radius: 4px;
    border-style: solid;
	border-width: 2px;
	touch-action: manipulation;
    transition: all 100ms ease;
	cursor: pointer;

	&:hover {
		border-color: $greyDark;
	}

	svg {
		pointer-events: none;
	}

	button  {

		display: flex;
		padding: 0;
		margin: 0;
		border: none;
		outline: none;
		color: $grey;
		background: none;
		-webkit-appearance: none;
		transition: color 150ms ease;

		&:hover {
			color: $greyDark;
		}

		svg {
			width: 20px;
			height: 20px;
			fill: currentColor;
			stroke: currentColor;
			stroke-width: 0;
		}
	}

	> button {
		padding: 8px;
	}

	&.wpgb-select-focused {
		border-color: $blue;
	}
}

.wpgb-select-placeholder {

	position: relative;
	display: flex;
	overflow: hidden;
	flex: 1 1 0;
	flex-wrap: wrap;
	align-items: center;
    padding: 2px 8px;
    outline: none;

	> .wpgb-select-value {
		position: absolute;
		overflow: hidden;
		max-width: 100%;
		top: 50%;
		white-space: nowrap;
		text-overflow: ellipsis;
		transform: translateY(-50%);
	}

	input {
		position: relative;
		width: 100%;
		padding: 0;
		margin: 0;
		background:...

JavaScript

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("wpgb",[],t):"object"==typeof exports?exports.wpgb=t():e.wpgb=t()}(window,function(){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var s=t[i]={i:i,l:!1,exports:{}};return e[i].call(s.exports,s,s.exports,n),s.l=!0,s.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)n.d(i,s,function(t){return e[t]}.bind(null,s));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(e,t,n){},function(e,t,n){"use strict";function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function l(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e}function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function c(e){return(c="function"==typeof Symbol&&"symbol"===r(Symbol.iterator)?function(e){return r(e)}:function(e){return e&&"function"==typeof...