LoginSignup
0
0

【Bulma】input内のiconをクリックさせる

Posted at

TL;DR

Bulmaの.control .has-icons-left/right .iconにはpointer-events: noneが指定されてるからクリックに反応しないよ、というお話。

やりたかったこと

input内に入れたiconをクリックするとinputの中身が消えたり隠れていたパスワードが表示されたりしたい!

書いてみた

sample.html
<div class="control has-icons-right">
  <input type="text" class="input" id="input">
  <span class="icon is-small is-right" onclick="delete('input')">
    <i class="fas fa-times"></i>
  </span>
</div>

※JSの実装は省略

動かしてみた

押しても押してもクリックに反応しない!DevToolsで見てもイベントリスナはちゃんと付与されてるし、要素.click()でちゃんと発火するし、z-indexも十分大きいし…

…あれ?

.control.has-icons-left .icon, .control.has-icons-right .icon {
    color: #dbdbdb;
    height: 2.5em;
    pointer-events: none; ←これだ!!!
    position: absolute;
    top: 0;
    width: 2.5em;
    z-index: 4;
}

直してみた

sample.html
<div class="control has-icons-right">
  <input type="text" class="input" id="input">
-  <span class="icon is-small is-right" onclick="delete('input')">
+  <span class="icon is-small is-right delete_icon" onclick="delete('input')">
    <i class="fas fa-times"></i>
  </span>
</div>
sample.css
.delete_icon {
    pointer-events: all !important;
}

ちゃんと動いた。めでたしめでたし。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0