<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic' rel='stylesheet' type='text/css'>

<div>
  <input class="custom" placeholder="Whats Up"/>
</div>
<div>
  <input name="search" class="custom" type="search" />
  <label class="icon-search"></label>
</div>
<div>
  <select id="sel" class="custom" >
    <option>Optio1</option>
    <option>Optio2</option>
    <option>Optio3</option>
    <option>Optio4</option>
    <option>Optio5</option>
  </select>
  <label for="sel" class="icon-reorder"></label>
</div>
<div>
  <input name="o" class="custom" type="radio" />
  <label>Dark</label>
  <input name="o" class="custom" type="radio" />
  <label>James</label>
  <input name="o" class="custom" type="radio" />
  <label>Jennifer</label>
</div>
<div>
  <input class="custom" type="number" />
</div>
div{  
  margin:10px auto;
  position:relative;
  height:auto;
  width:600px;
}

@colorscheme:#1b7b5b;
@hoverscheme:#c4c4c4;
@black:#222;

body{
  background:#ece9e2;
}

.custom{
  margin:0px;
  appearance:none;
  box-sizing:border-box;
  width:100%;
  padding:15px;
  border:2px solid #fff;
  font-size:24px;
  font-family: 'Ubuntu', sans-serif;
}


.custom:hover{
  border-color:@hoverscheme;
}

.custom:focus{
  border-color:@colorscheme;
  color:@colorscheme;
  background:transparent;
  outline:none;
}

.custom[type=search]{
  padding-right:50px;
}

.custom[type=search] + label,select.custom + label{
  line-height:60px;
  text-align:center;
  font-size:24px;
  position:absolute;
  height:100%;
  font-weight:100;
  width:60px;
  right:0px;
  top:0px;
  border-left:1px solid @hoverscheme;
}

.custom[type=search]:hover,select.custom:hover{
  border-color:#fff;
}

.custom[type=search]:focus,select.custom:focus{
  border-color:@colorscheme;
}
select.custom:focus{
  background:#fff;
}

.custom[type=search]:focus + label,.custom[type=search]:hover + label,select:focus + label,select:hover + label{
  background:@colorscheme;
  border-left:1px solid @colorscheme;
  color:#fff;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

.custom[type=radio],.custom[type=checkbox]{
  vertical-align:middle;
  margin:10px;
  padding:20px;
  width:10px;
  line-height:2px;
  text-indent:-12px;
  height:10px;
  border-color:@hoverscheme;
  display:inline-block;
}

.custom[type=radio]{
  border-radius:40px;
}

.custom[type=radio]:hover,.custom[type=checkbox]:hover,.custom[type=radio]:focus,.custom[type=radio]:checked{
  border-color:@colorscheme;
}

.custom[type=radio]:checked,.custom[type=checkbox]:checked{
  background:@colorscheme;
}

.custom[type=radio]:checked::before,.custom[type=checkbox]:checked::before{
  font-family:FontAwesome;
  color:#fff;
  content:'\f00c';
}

.custom[type=radio] + label{
  font-size:24px;
  vertical-align:middle;
  font-family: 'Ubuntu', sans-serif;
}

.custom[type="number"]::-webkit-outer-spin-button{ 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance: none;
    width: 50px;
    background-color: @hoverscheme;
}

input[type="number"]::-webkit-inner-spin-button::before, input[type="number"]::-webkit-inner-spin-button::after{
  font-family:FontAwesome;
  content:"\f106";
  display:block;
  color:#000;
  line-height:30px;
  text-align:center;
}


input[type="number"]::-webkit-inner-spin-button::after{
  content:"\f107";
}

input[type="number"]:focus::-webkit-inner-spin-button::after, input[type="number"]:focus::-webkit-inner-spin-button::before{
  color:#fff;
}


input[type="number"]:focus::-webkit-inner-spin-button{
    background-color: @colorscheme;
}
View Compiled
$("select + label").each(function(element){
  $(element).on("click",function(){
      this.prev().focus().click();    
  });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js