0

In Internet Explorer 11, the blinking text cursor inside an input field containing some typed-in text remains visible when a dropdown menu toggles open over the input field. I expect the cursor to be obscured when it's behind the menu like in Chrome/Firefox/Safari.

I found this issue when I entered random text in the input field and then (without clicking out of the input field) hovered over the dropdown button to prompt the dropdown menu to toggle open over the input field. I've tried adjusting the input field's z-index, but have not been able to get that cursor to go away.

How can I get that cursor to stay hidden for IE11?

Screenshot:

enter image description here

Snippet: 

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
<br>
<hr>
<br>
<form action="/action_page.php">
  First name: <input type="text" name="FirstName"><br>
  <input type="submit" value="Submit">
</form>
Kim
  • 411
  • 2
  • 10
  • Possible duplicate of [Can we avoid blinking cursor overlapping with div](https://stackoverflow.com/questions/17085513/can-we-avoid-blinking-cursor-overlapping-with-div) – David Jan 03 '19 at 20:50

1 Answers1

2

Apparently, the cursor is painted over the window surface in IE. All you can do is trigger blur() on the activeElement on mouseenter on .dropbtn:

document.querySelector('.dropbtn').addEventListener('mouseenter', function(){
  document.activeElement.blur();
})
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
<br>
<hr>
<br>
<form action="/action_page.php">
  First name: <input type="text" name="FirstName"><br>
  <input type="submit" value="Submit">
</form>
tao
  • 82,996
  • 16
  • 114
  • 150