Custom select dropdown issues in IE - list

Question

Ok, so I've searched around a bit and cannot find an answer to my question. At least not one that matches my problem exactly; so here's to hoping you guys don't have better luck, and that one of you knows the answer to my problem.
Before anyone asks... Yes, I am a developer with Microsoft, Yes, IE is our product, Yes, ALMOST everyone on my development team would rather use Firefox or Chrome as opposed to IE, and no... we have no control over how it operates, because that is the responsibility of the Internet Explorer team. In addition, we are not the evil empire everyone makes us out to be.
That being said, I'll give you what code I can in hopes to paint the best picture possible.
The select dropdown is a customized version, where I've hidden it's default arrow via a div tag and included my own dropdown arrow in the background of it's surrounding div with a class rightarrow. These elements are dynamically bound together via jQuery, here is the jQuery code...
function loadMarketSelector(options) {
// If the market selector already exists, just make sure it's visible.
if ($('#marketSelectorContainer').show().length) {
return;
}
var settings = { defaultCsvMarket: "", marketLabel: "", addUrl: "", loadingId: "", panelId: "", csvMarketOptions: [] };
if (options) {
$.extend(settings, options);
}
var $select = $('<select>', { id: 'csvMarketSelector', name: 'csvMarketSelector' }).addClass('items');
var defaultCsvMarketLowercase = settings.defaultCsvMarket.toLowerCase();
// Populate the market list
$(settings.csvMarketOptions).each(function (index, element) {
var $option = $('<option>', { title: element.label, text: element.label, dir: element.dir });
$option.data('marketId', element.market);
// If the user hasn't selected a market yet, use the best guess for their current language
if (element.market.toLowerCase() == defaultCsvMarketLowercase) {
$option.attr('selected', true);
$option.attr('class', 'selected');
} else {
$option.attr('class', 'other');
}
$select.append($option);
});
var $marketSelectorContainer = $('<div class="marketCont" id="marketSelectorContainer">').append($('<div class="marketvalue">').append($('<span>', { text: settings.marketLabel })).append($('<div class="marketlist">').append($('<div class="rightarrow hidden">').append($select))));
$('#payment-options-iframehost').before($marketSelectorContainer);
// When the user clicks on a market, refresh the page with the locale set to that market and with the redemption interface already open
$('.marketlist select').bind({
change: function () {
// Reload the page with the language set to the selected market and with the "redeem card" menu already open
var langParam = "lang=" + $(this).find('option:selected').data('marketId');
window.location.hash = 'redeem';
if (!window.location.search) {
window.location.search = langParam;
}
else if (window.location.search.search(/lang=/)) {
window.location.search = window.location.search.replace(/lang=(.+)&?/, langParam);
}
else {
window.location.search += '&' + langParam;
}
},
click: function(e){
$(this).parents('.rightarrow').toggleClass('downarrow');
//Once the select box is clicked collect the options right and left offsets.
var leftPos = $(this).offset().left;
var rightPos = leftPos + $(this).width();
//After the select box is clicked, if the mouse moves outside of the left and right positions;
//deactivate the dropdown box and return the sprite to it's original position.
$(document).mousemove(function(e){
if (e.pageX < leftPos-10 || e.pageX > rightPos+10) {
$('.marketlist select').trigger('blur');
}
})
},
blur: function () {
if ($(this).parent().hasClass('downarrow')) {
$(this).parent().removeClass('downarrow');
}
}
});
var mkt = $('.marketlist select option.selected').data('marketId'),
iframeId = settings.panelId + " iframe";
if (typeof mkt !== "undefined") {
// If the market passed to the page (via the lang param or the browser language) is CSV supported, load the PCS iframe
bam.ui.loadIframe(iframeId, appendParameters(settings.redeemCardUrl, { lmkt: mkt, mkt: mkt }), settings.loadingId, true, function () { $('.rightarrow').show();});
}
else {
// If the market is not supported, hide the description text but don't load PCS (since it won't work). The selector will be blank by default.
$(iframeId).hide();
}
}
Here is the css that applies to each of the elements...
.payment-options-page .marketCont {
height: 40px;
margin-left: 50px;
margin-bottom: 2px;
}
.payment-options-page .marketvalue .marketlist {
overflow: hidden;
margin-top:4px;
text-align: left;
width: 231px;
border: 1px solid #7c7c7c;
display: block;
vertical-align: middle;
height: 19px;
padding-left: 10px;
line-height: 19px;
cursor: pointer;
background: #fff;
}
.payment-options-page .marketvalue .marketlist .rightarrow select
{
height: 19px;
background: transparent;
border: 0;
border-radius: 0;
width: 253px;
position: relative;
cursor: pointer;
padding-left: 20px;
left: -20px;
z-index: 100001;
}
.payment-options-page .marketlist .rightarrow
{
background: url('/Content/all/imgs/transactions_down_right_arrow.png') no-repeat;
background-position: -318px -220px;
height: 19px;
width: 180px;
float: left;
cursor: pointer;
padding-left: 10px;
}
.payment-options-page .marketvalue .downarrow {
background: url('/Content/all/imgs/transactions_down_right_arrow.png') no-repeat;
background-position: -319px -277px;
height: 19px;
float: left;
cursor: pointer;
margin-right: 9px;
}
.payment-options-page .marketvalue .marketlist .rightarrow,
.payment-options-page .marketvalue .hover .downarrow
{
position:relative;
overflow:hidden;
}
The semantic select box works fine in all browsers if I click directly on the select box. The problem is when I click on the custom arrow in IE it acts as if it's dropping the list down (ie: The arrow changes from a right arrow to a down arrow and the select box highlights)(See the IE image) but the dropdown box acts as if it is hiding behind other elements.
The other form elements are in an iframe, where the country drop-down list is not.
Clicking on the arrow works in firefox...
Works in Chrome...
Clicking on the arrow in IE does not
but clicking on the select box itself does work...

Answer 1

I am having the same issue in a couple of projects right now and couldn't find an answer, so I've resolved to simply let the IE browsers use their default dropdown arrow. If you already have an IE only stylesheet (if not read this article on best practices for conditional styles - http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/) then you can just target the arrow there, and tell it not to display:
.payment-options-page .marketlist .rightarrow {display: none;}
The result might not look perfect, but it functions properly at least. From what I can tell the other browsers ignore the overlapping element, and for whatever reason IE registers this element and won't allow the click to work, and can't be fixed by offsetting the 'z-index' of either of the elements.
EDIT
A little more searching and I found a reason why. IE does not support pointer-events: none - which is the css property you need to apply to your arrow to let the browser know it should be ignored. See this answer for more info: https://stackoverflow.com/a/17441921/2539808
I'm still on the hunt for a solution to this problem, and I'll definitely let you know if I find one that can function while still looking the way we want it to :)