Search code examples
cssbulma

Custom cursor on a element (behind?) a input

I use Bulma and I would like to be able to see the pointer cursor on the right icon in the input field.

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

What should I do to see the cursor?

Thanks

Solution

  • It ignores the cursor movement, because pointer-events: none has been added by Bulma. As you can see:

    enter image description here

    It needs to be pointer-events: auto; to see the cursor movement. You can find more information about pointer-events from MDN. Also, icon is not behind the input.

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