输入元素上的自定义光标（在后面？）

Question

我使用 Bulma，我希望能够在输入字段的右侧图标上看到指针光标。

.main {
  max-width: 400px;
  margin: auto;
  padding-top: 10px;
}

.is-clickable {
  cursor: pointer;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.min.css" rel="stylesheet"/>

<div class="main">
  <div class="field">
    <p class="control has-icons-left has-icons-right">
      <input class="input" type="email" placeholder="Email">
      <span class="icon is-small is-left">
        <i class="fas fa-envelope"></i>
      </span>
      <span class="icon is-small is-right is-clickable">
        <i class="fas fa-check"></i>
      </span>
    </p>
  </div>
</div>

怎么才能看到光标？

谢谢

Answer 1

它忽略了光标的移动，因为pointer-events: none是Bulma添加的。如您所见：

需要pointer-events: auto;才能看到光标移动。您可以从 MDN 中找到有关 pointer-events 的更多信息。另外，图标不在输入后面。

.main {
  max-width: 400px;
  margin: auto;
  padding-top: 10px;
}

.is-clickable {
  cursor: pointer;
  pointer-events: auto !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.min.css" rel="stylesheet"/>

<div class="main">
  <div class="field">
    <p class="control has-icons-left has-icons-right">
      <input class="input" type="email" placeholder="Email">
      <span class="icon is-small is-left">
        <i class="fas fa-envelope"></i>
      </span>
      <span class="icon is-small is-right is-clickable">
        <i class="fas fa-check"></i>
      </span>
    </p>
  </div>
</div>

输入元素上的自定义光标（在后面？）

Custom cursor on a element (behind?) a input

css

bulma