Неверный курсор в select/option, IE

У меня проблема с плохим курсором в настройках, когда текст находится под ним.

Обычно опция использует курсор «по умолчанию», но когда, например. абзац находится под опцией, в IE я вижу "текстовый" курсор.

Код:

<form>
    <select>
        <option value=a selected="selected">First
        <option value=b>Second
        <option value=c>Third
        <option value=c>Fourth    
    </select>
    <p>text</p>
</form>

Это в IE11, и я думаю, что старые делают то же самое.

Я попытался установить положение: относительный и z-индекс для выбора, вариант и абзац, установить курсор с важным для выбора, вариант, но нет решения, ситуация такая же.

Есть идеи?


css internet-explorer option mouse-cursor
person Community    schedule 14.05.2014    source источник
comment
Также получаю эту проблему.   -  person Patrick    schedule 24.05.2014
comment
Я только что нашел этот вопрос, исследуя другой вопрос; и хотя решение JS, представленное в ответе bazzag, может работать, я нашел его довольно сложным, поэтому я попытался найти более простой обходной путь, используя только HTML и CSS. Если вы читаете этот вопрос и вам интересно, ознакомьтесь с ним здесь: stackoverflow.com/a/27911805/1427878   -  person CBroe    schedule 13.01.2015

Ответы (2)


arrow_upward
0
arrow_downward

IE не учитывает z-индекс выбранного объекта и применяет атрибут курсора любого базового объекта.

Я справляюсь с этим, изменяя атрибут курсора всех базовых объектов, чтобы он указывал на событие onfocus для выбранного объекта, и восстанавливал их при событии onblur для выбранного объекта.

Разочаровывает то, что IE не обрабатывает это правильно, как и большинство других браузеров.

Пример кода (по запросу DavidG):

В этом примере мы применяем класс «недостаточный выбор» ко всем элементам, которые будут охвачены раскрывающимся списком выбора (примечание: раскрывающийся список не всегда расширяется вниз, он может расширяться вверх).

При загрузке страницы начальное свойство курсора каждого элемента с классом underselect сохраняется в атрибуте ic этого элемента.

Событие focus элемента select связано с функцией, которая устанавливает курсор всех элементов с классом underselect в указатель.

Событие размытия элемента select связано с функцией, которая устанавливает курсор всех элементов с классом underselect в начальное значение, которое было сохранено при загрузке страницы.

Использование jquery

$(function ()
{
  $("#select")
    .bind("focus", function(){ $(".underselect").each(function(){$(this).css("cursor", "pointer") });  })
    .bind("blur", function(){ $(".underselect").each(function (i){$(this).css("cursor", $(this).data("ic")); }) });

  $(".underselect").each(function () { $(this).data("ic", $(this).css("cursor")); });
});

Используя только javascript, мы создаем следующие функции:

function saveinitialcursor()
{
  gp = document.getElementsByClassName("underselect");
  for (var i = 0, l = gp.length; i < l; i++)
  {
    style = getComputedStyle(gp[i]);
    cursor = style.getPropertyValue("cursor");
    gp[i].setAttribute("ic", cursor);
  }
}

function selectfocus()
{
  gp = document.getElementsByClassName("underselect")
  for (var i = 0, l = gp.length; i < l; i++)
    gp[i].style.cursor = "pointer";
}

function selectblur()
{
  gp = document.getElementsByClassName("underselect")
  for (var i = 0, l = gp.length; i < l; i++)
    gp[i].style.cursor = gp[i].getAttribute("ic");
}

и привяжите их к телу и выберите открывающие теги:

<body onload="saveinitialcursor()" >

<select id="select" onblur="selectblur()" onfocus="selectfocus()" >
person bazzag    schedule 29.05.2014
comment
Можете ли вы опубликовать пример того, как вы это делаете? Возможно, на jsfiddle.net? - person DavidG; 30.05.2014

arrow_upward
-1
arrow_downward

Хотя вы закрыли тег select с помощью </select>, вам все равно нужно закрыть параметры. На данный момент браузер читает все после: <option value=a selected="selected"> как один вариант.

Оберните все ваши параметры с помощью </option> - это должно выглядеть так:

<form>
    <select>
        <option value=a selected="selected">First</option>
        <option value=b>Second</option>
        <option value=c>Third</option>
        <option value=c>Fourth</option>
    </select>
    <p>text</p>
</form>
person Jacob    schedule 28.05.2014
comment
Нет, конечный тег параметра необязателен, эти HTML-коды одинаковы. Вы должны попробовать это, прежде чем писать ответ;) - person ; 29.05.2014