<select name="hoge">
    <option value="1">角屋のあじフライ</option>
    <option value="2">角屋のいわしフライ</option>
    <option value="3">かどやんソース</option>
  </select>

label > input ~ .fukidashi{
  display:none;
}
label > input:checked ~ .fukidashi{
  display:block;
}

select:checked{
  background: #0ff;
}


.fukidashi *{
  margin:0;
  padding:0;
}
.fukidashi option{
  display:block;
  line-height: 1.5em;
  text-align: center;
  color: #fff;
  cursor:pointer;
  width: 100%;
}
.fukidashi option:hover{
  color: #1a84ca;
  background: #fff;
}
.fukidashi option:hover:before{
  content: '';
  display: inline-block;
  width: 0;
  margin-left: -0.4em;
  border-top: solid 0.4em transparent;
  border-left: solid 0.4em #1a84ca;
  border-bottom: solid 0.4em transparent;
  border-right: solid 0.4em transparent;
}
.fukidashi option{
  border-bottom: solid 1px #fff;
}
.fukidashi option:last-of-type{
  border:0;
}
.fukidashi{
  display: inline-block;
  background-color: #1a84ca;
  padding: 0.2em 0.4em;
  border-radius: 0.5em;
  position: relative;
  width: 7em;
  user-select: none;
  -webkit-user-select: none;
}
.fukidashi:before{
  content: '';
  width: 0;
  height: 0;
  display: inline-block;
  position: absolute;
  bottom: 100%;
  left:0;
  right:0;
  margin: auto;
  border-top: solid 1em transparent;
  border-bottom: solid 0.6em #1a84ca;
  border-left: solid 0.4em transparent;
  border-right: solid 0.4em transparent;
}

$(function(){
  var $select = $("select");
  var $checkbox = $("<input type='checkbox'>").css({display:'none'});
  var $label = $("<label></label>").css({display:"inline-block",position:"relative"});
  var $blocking = $("<div></div>").css({display:"inline-block",position:"absolute",width:"100%",height:"100%","background-color":"transparent",top:0,left:0});
  $select.wrap($label);
  $select.before($checkbox);
  var $labels = $select.parent('label');
  $select.after($blocking);
  
  var n=1;
  $select.each(function(){
    var $this = $(this);
    
    var x = $("<div class='fukidashi'></div>").css({position:"absolute",top:"1.5em",left:0,right:0,margin:"auto",width:"140%","z-index":9999999});
    $("option", this).clone().appendTo(x).css({display:"block",cursor:"pointer"});
    $("option", x).on("click", function(){
      $this.val( $(this).val() );
    });
    x.insertAfter($(this));
  });
  
  $select.on("focus", function(e){
    // e.preventDefault();
    $(this).parent().focus();
  });
  
  $labels.on("click", function(){
    $("> input[type='checkbox']", this).each(function(){
      $(this).prop('checked', !$(this).prop('checked'));
    });
    return false;
  });
});