htmlcsscaret

Disable caret for non-input elements?

Is it possible to disable the blinking caret on an HTML document for elements that are non-input elements?

For example, clicking a list item will move the caret to the list item element:

<ul>
  <li>Cool choice 1</li>
  <li>Cool choice 2</li>
  <li>Cool choice 3</li>
</ul>

If you have an ul that you're using for navigation then you may want them to feel like buttons. This could be achieved if the caret weren't in play. Is such a thing possible?

Solution

  • Try this class 

    .disableCaret{
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
   user-select: none;       
}