Question

当文本在该选项下时，我在选项中出现错误游标时出现问题。

通常，该选项使用“默认”光标，但是例如。该段落在选项下，在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，我认为较旧的是同样的。

我试着设置position：relative和z-index来选择，选项和段落，设置游标有重要选择，选项，但没有解决方案，情况是一样的。

有什么想法吗？

Answer 1

IE不支持select对象的z-index，并应用任何底层对象的cursor属性。

我通过将所有底层对象的cursor属性更改为select对象的onfocus事件的指针来处理此问题，并在onblur事件中为select对象恢复它们。

令人失望的是IE没有像大多数其他浏览器那样正确处理这个问题。

示例代码（根据DavidG的要求）：

在这个例子中，我们对选择下拉列表所涵盖的所有元素应用了一个“欠选择”类（n.b.下拉列表并不总是向下扩展，它可以向上扩展）。

在页面加载时，具有类“underselect”的每个元素的初始cursor属性保存在该元素的属性“ic”中。

select元素的焦点事件绑定到一个函数，该函数将所有元素的光标设置为“underselect”类到指针。

select元素的blur事件绑定到一个函数，该函数将具有类“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()" >

Answer 2

虽然您已使用</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>

IE中选择/选项中的光标不正确

2 个答案: