<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;
});
});
This Pen doesn't use any external CSS resources.