Pure CSS <select>

Use hidden radio buttons to design a custom selection box

by thelifeisyours

HTML

<cbselect id="cbselect" tabindex="-1">
  <input type="radio" name="select" id="option1" value="YourChoice" checked>
  <label for="option1">Make your choice</label>
	
  <input type="radio" name="select" id="option2" value="PureCSS">
  <label for="option2">Pure CSS</label>
	
  <input type="radio" name="select" id="option3" value="FullControl">
  <label for="option3">Full control</label>
	
  <input type="radio" name="select" id="option4" value="Tabable">
  <label for="option4">Tabable</label>
	
  <input type="radio" name="select" id="option5" value="Uniform">
  <label for="option5">Uniform</label>
</cbselect>

<cbselect id="cbselect" tabindex="-2">
  <input type="radio" name="select" id="asd" value="YourChoice" checked>
  <label for="asd">sadas</label>
	
  <input type="radio" name="select" id="zx" value="PureCSS">
  <label for="zx">eafe</label>
	
  <input type="radio" name="select" id="cd" value="FullControl">
  <label for="cd">eafea</label>
	
  <input type="radio" name="select" id="re" value="Tabable">
  <label for="re">asvds</label>
	
  <input type="radio" name="select" id="we" value="Uniform">
  <label for="we">sfawd</label>
</cbselect>

CSS

body {
  font-family: Areal, sans-serif;
	display:flex;
	flex-flow:row;
	justify-content:space-between;
}

/* ---------------------------- CORE ---------------------------- */
cbselect {
    width: 10em;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    color: #212121;
  }
  
  /*Remove browser highlight borders*/
  cbselect:active,
  cbselect:focus {
    border: none;
    padding: 0;
    outline: none;
  }
  
  cbselect input[type="radio"] {
    opacity: 0;
    position: absolute;
    z-index: -1;
  }
  
  
  /*If select is not active/in focus */
  cbselect:not(:focus)>input[type="radio"]:not(:checked)+label {
    display: none;
  }
  
  /*If select is active/in focus */
  cbselect:not(:focus)>input[type="radio"]:checked+label {
    pointer-events: none;
  }
  
  cbselect>input[type="radio"]:checked+label {
    order: 1;
    padding: 10px;
    border: 1px solid #9e9e9e;
    border-radius: 5px;
    background-color: #fff;
  }cbselect>input[type="radio"]:not(:checked)+label {
    order: 3;
    background: #FFF;
    padding: 5px 10px;
    border: 1px solid #9e9e9e;
    border-width: 0 1px 0 1px;
  }
  
  cbselect input[type="radio"]:checked:focus+label {
    border: 1px solid #26F;
    box-shadow: 0 0 3px #26F;
  }
  
  cbselect:focus:before {
    order: 2;
    content: "";
    background: #FFF;
    margin-top: 3px;
    display: block;
    box-sizing: border-box;
    height: 3px;
    border-radius: 3px 3px 0 0;
    border: 1px solid #9e9e9e;
    border-bottom: none;
  }
  
  cbselect:focus:after {
    order: 4;
    content: "";
    margin-top: -1px;
    background: #FFF;
    display: block;
    box-sizing: border-box;
    height: 3px;
    border-radius: 0 0 3px 3px;
    border: 1px solid #9e9e9e;
    border-top: none;
  }

JavaScript

<?php
    include 'includes/db.pdo.connection.inc.php';
    error_log("Request for observations was made");

    $query_data = $_SESSION['query_data'];

    $periodFrom = $query_data['from'] != NULL ? $query_data['from'] : NULL;
    $periodTo = $query_data['to'] != NULL ? $query_data['to'] : NULL;
    $images = $query_data['images'] != NULL ? $query_data['images'] : NULL;
    $locations = $query_data['locations'] != NULL ?  "'".implode("','", explode(",", $query_data['locations']))."'" : NULL;

    error_log("Request: ". "periodFrom => ". $periodFrom . "| periodTo => ".$periodTo . "| Images => ".$images . "| Locations => ".$locations);

    $stmt = $pdo->prepare("SELECT * FROM LWFG INNER JOIN LWFGloc ON LWFG.Location = LWFGloc.Locarea WHERE YEAR(LWFG.Date) >= YEAR(:fromDate) AND YEAR(LWFG.Date) <= YEAR(:toDate) AND LWFGloc.Country IN (:locations) ORDER BY LWFG.Gendate DESC;");
    $res = $stmt->execute(array(':fromDate' => $periodFrom, ':toDate' => $periodTo, ':locations' => $locations));
    
    if($res >= 1){
        $rows = $stmt->fetchAll();
        if(array_count_values($rows) <= 0){
            echo "<h3>No observations to display</h3>";
        } else {
            echo "<h3>Got Data</h3>";
            echo var_dump($rows);
        }
        foreach($rows as $row){
            error_log($row['Date']);
            echo $row['Date'];
        }
    }

    //Closing pdo Connection
    $pdo = null;
    sleep(60);