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

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>

我应该怎么做才能看到光标？

谢谢

标签： cssbulma

Answer 1

它忽略了光标的移动，因为pointer-events: none已经被 Bulma 添加了。如你看到的：

它需要pointer-events: auto;看到光标移动。pointer-events您可以从MDN找到更多信息。此外，图标不在输入后面。

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