Question 336890 in CSS Question posted in
Some basic documentation can be found here.

Bulma CSS, clear button in input search text field

I have a search text field like this one:

    <div class="field">
      <p class="control has-icons-left has-icons-right">
        <input class="input is-normal is-rounded" type="text" placeholder="Search...">
        <span class="icon is-small is-left">
          <i class="fa-solid fa-filter"></i>
        </span>
      </p>
    </div>

I want to add a clear button on it, that clears the text in the field if something is written on it. It would be nice if it appears only if there is some text in the field.

Thanks for the help.

Tags:

2

Answers


  1. 0

    You can add the bulma css class is-hidden to the icon, then onInput of the input element, remove that class to make it visible. Or, if the user removes all the input, add the class back to hide it again.

    const inputElement = document.querySelector('input');
const inputIcon = document.querySelector('i');

inputElement.addEventListener('input', (e) => {
    if (e.target.value.length > 0) {
        inputIcon.classList.remove('is-hidden');
    } else {
        inputIcon.classList.add('is-hidden');
    }
});
    html, body { height: 100vh; }
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">

 <div class="field">
  <p class="control has-icons-left has-icons-right">
    <input class="input is-normal is-rounded" type="text" placeholder="Search...">
    <span class="icon is-small is-left">
      <i class="fa-solid fa-filter is-hidden">:D</i>
    </span>
  </p>
</div>
    Login or Signup to reply.
  2. 0

    You may use the CSS pseudo-class :placeholder-shown to style the elements you want to hide based on the input condition.

    https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown

    So here in this demo I added some css rules that will hide the buttons when the placeholder is still being shown (so when the input is still not filled with text).

    Here in this demo I put some efforts to style it the best way possible but there are few caveats. The main problem was using a span to model what should be actually a button instead for accessibility concerns!

    But I wanted to follow the guidelines shown on https://bulma.io/documentation/form/general/ that use that layout for icons instead. I tried with buttons but they looked very ugly. So please take this detail into account and spend yourself to address that issue.

    Look here for further information about that topic: https://www.boia.org/blog/accessibility-tips-using-the-div-and-span-elements#:~:text=In%20general%2C%20you%20should%20avoid,with%20the%20HTML%20tabindex%20attribute.

    side note: I understand that SO is not an helpdesk but yet sometimes I decide it’s worth spending time to see if I can solve something for my own purpose and it would be wasted if not shared

    //when page was loaded
document.addEventListener('DOMContentLoaded', ()=>{
  
  //add a click event handler to the #clearButton,
  document.getElementById('clearButton')
    .addEventListener('click', ()=>{
      //that will clear the value of the #search text input
      document.getElementById('search').value = '';
    });
    
  //add a click event handler to the #filterButton
  document.getElementById('filterButton')
    .addEventListener('click', ()=>{
      //that will just log something on console
      console.log('filter occurred!');
    });
    
});
    .field{
  margin: 2em;
}

#search:placeholder-shown + #filterButton {
  display: none;
}

#search:placeholder-shown ~ #clearButton {
  display: none;
}

#clearButton,
#filterButton
{
  pointer-events: auto;
  cursor: pointer;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="field">
  <div class="control has-icons-left has-icons-right">
    <input id="search" class="input is-normal is-rounded" type="text" placeholder="Search...">
    <span id="filterButton" class="icon is-small is-right">
      <i class="fa-solid fa-filter"></i>
    </span>    
    <span id="clearButton" class="icon is-small is-left">
      <i class="fas fa-times"></i>
    </span>
  </div>  
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search