How can I change the appearance of the default close button of a Bootstrap 5 search-box?

Question

I am working on making a blog template with Bootstrap 5.

I run into a (small) problem while making the search box.

Using the code below conveniently gives me a small close button:

.input-group-append .btn {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>

<nav class="navbar sticky-top navbar-expand-md navbar-dark bg-light">
    <form class="w-100 px-2 mx-auto mt-2 mt-md-0" role="search">
      <div class="input-group">
        <input class="form-control search-box" type="search" placeholder="Search articles..." aria-label="">
        <div class="input-group-append">
          <button class="btn btn-success" type="submit">
            Search
          </button>
        </div>
      </div>
    </form>
</nav>

The goal

I wish to change the icon used by default as a close button

The problem

I have been ubable to target the icon that Bootstrap uses by default as a close button.

For this reason, I can not change it in any way: replacing the image with another, targeting it with CSS, etc.

Questions:

Is it an image that Bootstrap uses as a close icon? If so, what's its name and how can I replace it?
Alternatively, can I change its appearance with CSS?

You're apparently following the wrong documentation. You do not need to write your own CSS to square the corners of an add-on button. See https://getbootstrap.com/docs/5.2/forms/input-group/#button-addons — isherwood, Mar 28 '23 at 20:37
Then, inputs don't have _close_ buttons. There's nothing to close. What are you trying to do here? Is this a _clear_ button? — isherwood, Mar 28 '23 at 20:38
For those tying to understand this a bit more; with bootstrap (as this example) if you run the snippet and focus the input you will see an X on the right just before the SEARCH button. — Mark Schultheiss, Mar 28 '23 at 20:47
This might be the browser putting the X there when the `type="search"` after you start typing in there so you may need to later the type and customize a hovering icon. Similar to how browsers do a calendar or datepicker type — Mark Schultheiss, Mar 28 '23 at 20:58

Mark Schultheiss · Answer 1 · 2023-03-28T21:40:32.353

You can alter your markup slightly to put an icon (here ( did two) anywhere.

Here is a super ugly example with no functional "close" action etc.

.input-group-search.btn.btn-warning {
  border-bottom-right-radius: 0.5rem !important;
  border-top-right-radius: 0.5rem !important;
}

.search-icon {
  right: 1.5rem;
  cursor: pointer;
  z-index: 100;
  
}
.search-icon:hover {
    -webkit-text-stroke: 2px;
  }
.search-close-icon {
  right: 17rem;
  z-index: 100;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>

<nav class="navbar sticky-top navbar-expand-md navbar-dark bg-light">
  <form class="w-100 px-2 mx-auto mt-2 mt-md-0" role="search">
    <div class="m-3 p-5">
      <div class="input-group d-inline-flex align-items-center">
        <input class="form-control" type="text" value="">
        <span class="input-group-search btn pe-5 btn-warning">Search for Potatoes</span>
        <i class="search-icon bi bi-search position-relative text-primary"></i>
        <i class="search-close-icon bi bi-x-square-fill position-relative text-danger"></i>
      </div>
    </div>
  </form>
</nav>

How can I change the appearance of the default close button of a Bootstrap 5 search-box?

The goal

The problem

Questions:

1 Answers1