I have the following setup for MC Dropdown
<div class="mcdropdown">
<input autocomplete="off" name="" style="height: 15px; width: 159px;" id="">
<a class="mcdropdownarrow" href="#" tabindex="-1"></a></div>
The Entries will be set during runtime via a JQuery Method.
My Question is: How can I design the mcDropdown DIV as it would be a normal "select" Element
With Chrome / Webkit Engine it woks fine with the following CSS Code:
-webkit-appearance: menulist;
for the class mcdropdown
The Arrow is showed under the a-Element which works fine for me.
The correspondig Command -moz-appearance
for firefox doesn't work like expected. There the arrow doesn't show up at all. To fix this Issue I set for the a
-Element -moz-appearance: menulist-button;
which gave me the design of a button, but not the typical sidely attached button of a select
-Element
In IE (must be compatible with IE 8) I couldn't find a solution without creating a Arrow Graphics out of a screenshot. And there is the next problem: The typically described <!--[if IE]><![endif]-->
(i.e. here) to make a IE specific stylesheet doesn't work on my WIN7 maschine with IE10 at all.
Are there any solutions with Javascript to mimic the design of a select
-Element in a easy way ?
My archievements until now on codepen.io
Thanks for any kind of answer!
Best Regards from Frankfurt
(This is my first question on stackoverflow. I loved this plattform as passive reader and now I want to participate)