1

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)

Community
  • 1
  • 1
WhoAmI
  • 135
  • 8

0 Answers0