<select name="hoge">
<option value="1">角屋のあじフライ</option>
<option value="2">角屋のいわしフライ</option>
<option value="3">かどやんソース</option>
</select>
select + .fukidashi{
display: none;
}
select:focus + .fukidashi{
display: block;
}
.fukidashi *{
margin:0;
padding:0;
}
.fukidashi > *{
line-height: 1.5em;
text-align: center;
color: #fff;
cursor:pointer;
width: 100%;
}
.fukidashi > *:hover{
color: #1a84ca;
background: #fff;
}
.fukidashi > *: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 > *{
border-bottom: solid 1px #fff;
}
.fukidashi > *: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 $parent = $("<div class='fukidashi-parent'></div>").css({position:"relative",display:"inline-block"});
$select.wrap($parent);
var $blocking = $("<div class='blocking'></div>").css({position:"absolute",top:0,left:0,width:"100%",height:"100%","z-index":10,"background-color":"transparent"}).appendTo($select.parent());
var $parents = $select.parent('div');
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:"110%","z-index":9999999});
// $("option", this).clone().appendTo(x).css({display:"block",cursor:"pointer"});
$("> option", $this).each(function(){
$("<div>" + $(this).text() +"</div>").attr("data-value", $(this).val()).appendTo(x).css({cursor:"pointer"});
});
$("> div", x).on("mousedown touchstart", function(){
$this.val( $(this).data("value") );
});
x.insertAfter($(this));
});
$blocking.on("click", function(){
$(this).parent().children("select").focus();
});
});
This Pen doesn't use any external CSS resources.