选择/选项中的光标，IE [英] Bad cursor in select/option, IE

问题描述

我有一个问题，当选项中的错误光标在文本下面。

通常，选项使用默认光标，该段落在选项下，在IE中我看到文本光标。

代码：

 < form> 
< select> 
< option value = a selected =selected>第一个
< option value = b>第二个
< option value = c>第三个
< = c> Fourth 
< / select> 
< p>文字< / p> 
< / form> 
  

在IE11中，我认为老版本是一样的。

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

任何想法？

解决方案

IE不支持select对象的z-index ，并应用任何基础对象的游标属性。

我通过将所有底层对象的cursor属性改为指针在选择对象的onfocus事件处理，

与其他大多数浏览器一样，IE不能正确处理这个错误。

示例代码（按照DavidG的要求）：

在这个例子中，我们将一个'underselect'通过选择下拉（nb下拉不总是向下扩展，它可以向上扩展）。

在页面加载每个元素的初始cursor属性， '保存在该元素的属性'ic'中。

select元素的focus事件绑定到一个函数，该函数设置所有元素的游标underelectto pointer。

select元素的blur事件绑定到一个函数，该函数将所有具有'underselect'类的元素的游标设置为初始值

使用jquery

  $ function（）
 {
 $（＃select）
 .bind（focus，function（）{$（。underselect this）.css（cursor，pointer）}）; }; 
 .bind（blur，function（）{$（。underselect）。each（function（i）{$（this）.css（cursor，$（this）.data 我知道了））; }） }）; 
 
 $（。underselect）。each（function（）{$（this）.data（ic，$（this）.css（cursor））;}）; 
}）; 
  

仅使用JavaScript我们创建以下函数：

  function saveinitialcursor（）
 {
 gp = document.getElementsByClassName（underselect）; 
 for（var i = 0，l = gp.length; 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  gp [i] .style.cursor =pointer; 
} 
 
 function selectblur（）
 {
 gp = document.getElementsByClassName（underselect）
 for（var i = 0，l = gp .length; i  gp [i] .style.cursor = gp [i] .getAttribute（ic）; 
} 
  

并将其绑定到正文并选择开始标签：

 < body onload =saveinitialcursor（）> 
 
< select id =selectonblur =selectblur（）onfocus =selectfocus（）> 
  

I have a problem with bad cursor in options when the text is under that.

Normally, the option uses "default" cursor, but when eg. the paragraph is under option, in IE I see "text" cursor.

Code:

<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>

It´s in IE11 and I think the older ones makes the same.

I tried to set position: relative and z-index to select, option and paragraph, set cursor with important to select, option, but no solution, situation is the same.

Any idea?

解决方案

IE does not honour the z-index of the select object, and applies the cursor attribute of any underlying object.

I handle this by changing the cursor attribute of all underlying objects to pointer at the onfocus event for the select object, and restore them at onblur event for the select object.

It is disappointing that IE does not handle this correctly, as do most other browsers.

Example code (as requested by DavidG):

In the this example we apply a class of 'underselect' to all elements that will be covered by the select dropdown (n.b. the dropdown does not always expand downwards, it can expand upwards).

On page load the initial cursor property of each element with the class 'underselect' is saved in a attribute 'ic' of that element.

The focus event of the select element is bound to a function that sets the cursor of all elements with the class 'underselect' to pointer.

The blur event of the select element is bound to a function that sets the cursor of all elements with the class 'underselect' to the initial value that was stored on page load.

Using 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")); });
});

Using javascript only we create the following functions:

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");
}

and bind them to the body and select opening tags:

<body onload="saveinitialcursor()" >

<select id="select" onblur="selectblur()" onfocus="selectfocus()" >

这篇关于选择/选项中的光标，IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！