Fully customizable pure CSS drop down select

Here’s the code, first the HTML:

<span>
  <span>
    <label for="value1">First option</label>
    <label for="value2">Second option</label>
    <label for="value3">Third option</label>    
  </span>
</span>

And then the CSS, written with SCSS syntax

span[data-acts-as-select]{
  	min-width: 130px;
  	height: 23px;
  	display: inline-block;
  	position: relative;
  	border: 1px solid gray;
  	background-color: lightgray;
  	font-family: Georgia;
  
  	& > span{
    	display: block;
    	position: absolute;
    	top: 100%;
    	left: 0; right: 0;
    	box-shadow: 0 0 10px rgba(0,0,0,0.5);
  	}
  
  	&:after{
		position: absolute;
		content: '▾';
		display: block;
		top:0; right:0; bottom:0;
		width: 18px;
		line-height: 23px;
  	}
  
  	label{
		display: none;
		white-space: nowrap;
		line-height: 23px;
		padding: 0 5px;
		cursor: pointer;
    
    	&:hover{
      		background-color: lightblue;
    	}
  	}  
  
  	input[type=radio]{
		position: absolute;
		clip: rect(0,0,0,0);
    
    	&:checked + label{
      		display: block;
      		position: absolute;
      		bottom: 100%;
      		left: 0;
          
      		&:hover{
        		background-color: transparent;
      		}
    	}
  	}
  
  	&:hover label{
    	display: block;
  	}
    
}

The post Fully customizable pure CSS drop down select appeared first on codexguru.