I researched and found several ways to do this, I'll put here the one I found most convenient, using HTML
, CSS
, JQuery
.
Reference with tutorial: Reinventing a drop down with css and jquery
Basically you will use <a>
and <span>
to display your "select" and at the end assign the selected value to a <input type="hidden" />
to be able to manipulate the will and submit to the server-side.
The following example works:
$(".dropdown img.flag").addClass("flagvisibility");
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
$("#idiomaSelecionado").val(
getSelectedValue("sample")
);
console.log(
'Idioma selecionado:' + getSelectedValue("sample")
);
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
$(".dropdown img.flag").toggleClass("flagvisibility");
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
.desc { color:#6b6b6b;}
.desc a {color:#0092dd;}
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
.dropdown a:hover { color:#5d4617;}
.dropdown dt a:hover { color:#5d4617; border: 1px solid #d0c9af;}
.dropdown dt a {background:#e4dfcb url('http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/arrow.png') no-repeat scroll right center; display:block; padding-right:20px;
border:1px solid #d4ca9a; width:150px;}
.dropdown dt a span {cursor:pointer; display:block; padding:5px;}
.dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;}
.dropdown dd ul li a:hover { background-color:#d0c9af;}
.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
.flagvisibility { display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><dlid="sample" class="dropdown idiomaescolha1">
<dt><a href="#"><span>Selecione</span></a></dt>
<dd>
<ul>
<li>
<a href="#">
<img class="flag" src="https://image.flaticon.com/icons/png/128/206/206597.png"alt="" width="16" height="16" />
<span class="value">POR</span>
Português
</a>
</li>
<li>
<a href="#">
<img class="flag" src="https://image.flaticon.com/icons/png/128/206/206724.png"alt="" width="16" height="16" />
<span class="value">ESP</span>
Espanhol
</a>
</li>
<li>
<a href="#">
<img class="flag" src="https://image.flaticon.com/icons/png/128/206/206626.png"alt="" width="16" height="16" />
<span class="value">ING</span>
Inglês
</a>
</li>
</ul>
</dd>
</dl>
<input type="hidden" id="idiomaSelecionado" value="" />