CSS Powered dropdown

boxdown.js

import React from 'react';
import './Boxdown.less';

class Boxdown extends React.Component{

  items(){
    return this.props.items.map(item => {
      return (
        <li key={item.value} onClick={this.handleChange} data-value={item.value}>
          <a href="#">{item.text}</a>
        </li>
      )
    })
  }

  handleChange = (event) =>{
    this.props.onChange(event.target.dataset.value)
  }

  render() {
    return (
      <div className="boxdown">
        <input type="checkbox" id="checkbox-toggle">
          <label htmlFor="checkbox-toggle" {...this.props}>{this.props.title}</label>
          <ul>
            {this.items()}
          </ul>
        </input>
      </div>
    )
  }

}

boxdown.less

.boxdown {
    position: relative;
    display: inline-block;
    font-size: 16px;
    color: #FFF;

  input[type=checkbox]{
      display: none;
  }

  label{
      box-sizing: border-box;
      display: inline-block;
      width: 100%;
      background-color: #57A0D4;
      padding: 15px 20px;

      cursor: pointer;
      text-align: center;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }

  ul{
      position: absolute;
      list-style: none;
      text-align: left;
      width: 100%;
      z-index: 1;
      margin:0;
      padding:0;
      box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);

      display: none;
  }


  ul li{
      padding: 15px;
      background-color: #fff;
      color: #4FB9A7;
      margin-bottom: 1px;
      cursor: pointer;
  }

  ul li:hover{
      background-color: #4FB9A7;
      color: #FFF;
  }

  ul li a{
      color: inherit;
      text-decoration: none;
  }

  input[type=checkbox]:checked ~ label {
      background-color: #3D88BD;
  }


  input[type=checkbox]:checked ~ ul {
      display: block;
  }

}

test.js

export default class Test extends React.Component{

  onChange = (value) =>{
    console.log(value)
  }

  render() {
    return (
      <Boxdown title="Select one" items={[{value: 'test', text: 'Test'}]} onChange={this.onChange}/>
    )
  }

}