Is there a way to customize the look of the close button on a Bootstrap 5 search box?

I am currently in the process of designing a blog template using Bootstrap 5.

While working on creating the search box, I encountered a minor issue.

The code snippet below has provided me with a small close button:

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

I want to change the default icon used as the close button

I have tried without success to target the default close button icon that Bootstrap uses.

Due to this, I am unable to modify it in any way, such as replacing the image or styling it with CSS.

Queries:

  • Does Bootstrap utilize an image for the close icon? If yes, what is its name and how can I swap it out?
  • Alternatively, is it possible to alter its appearance using CSS?
csstwitter-bootstrapbootstrap-5

Answer №1

If you want to include an icon in your markup, you can make a slight alteration to do so.

Below is a rather unattractive example with no actual "close" functionality implemented.

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e0ededf6f1f6f0e3f2afebe1edecf1c2b3acb3b2acb1">[email protected]</a>/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f0d00001b1c1b1d0e1f2f5a415d415c">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS Element Overlapping Issue in Safari Browser

I am currently developing an audio player for my application that includes a pause/play button, next button, and back button. I have encountered a problem specifically on Safari where the back/pause buttons are overlapping each other. The play/pause button ...

javascripthtmlcssnext.js

Is there a way to position headline text behind another headline? Take a look at the image provided for reference

I need help creating headline text with a background image similar to the example below. I tried using relative positioning on the first heading, but I can't seem to get it to work correctly. If anyone can provide me with the code to achieve this ef ...

htmlcss

In Vue, applying CSS styles to D3's SVG elements may not work as expected when using the scoped attribute

Here is the code snippet of my component: <template> <div id="something" class="card"> </div> </template> const height = 200; const width = 200; let graph = d3 .select('#something') .append('svg') ...

javascriptcssvue.jsd3.jssvg

Enhance D3 Version 6 Stacked Bar Chart with Spacing and Interactive Features

My bar chart lacks the spacing between bars that I intended to achieve, and the interactive tooltip doesn't show up when hovering over the bars. I could use some assistance with this. The purpose is to display the value of a specific color when hoveri ...

javascripthtmlcssd3.js

JavaScript progress bar with extended duration, inspired by the success-oriented approach

Currently, I am in search of a unique solution or plugin that can replicate the same effect as Kickstarter's crowd fund long term progression bar. It seems like existing solutions only offer short term dynamic progress bars that indicate the percentag ...

javascriptjquerycssjquery-ui

Creating a visually striking layout with Bootstrap card columns masonry effect by seamlessly adjusting card heights to prevent any

When using the bootstrap card columns masonry and a user clicks on a button inside a card, the height of the card changes dynamically by adding a card-footer. However, in certain situations, the cards change position causing a jumpy effect. To see this i ...

javascriptjqueryhtmlcssbootstrap-4

Using the ng-class directive to dynamically set classes based on the value returned from

I am facing an issue with setting the icon style based on a value returned from the controller. The console log confirms that the value is triggered correctly, but it appears that there is a problem with the Ng-class expression. Any assistance on this matt ...

javascriptcssangularjshtmlionic-framework

Is there a way to decrease the speed of a text when hovering over it?

Is there a way to create a button that displays text before another text only on hover, with a delay? I've managed to achieve the effect but can't figure out how to slow it down. For example, notice how quickly the word "let's" appears when ...

htmlcsscss-transitionspseudo-element

Effective Methods for Implementing CSS Variables within nth-child Selectors

Objective: To pass a variable successfully as a parameter to nth-child. The task is to make the third line turn green in the example provided. Dilemma: Currently, the parameter is being disregarded as a variable. Inquiry: Is achieving this possible? If s ...

css

Execute javascript function upon user scrolling to a designated section in the webpage

Is there a method to trigger a unique function every time a user scrolls to a different div or section of the page? ...

javascriptjquerycsshtml

Elements being impacted by the CSS Transition are being pushed

I am facing a CSS issue that I just can't seem to resolve. If you visit and check out the top search bar. On hovering over it, you'll notice it resizes to fit the content width. This is the CSS code responsible for this: .header .search-wrap ...

htmlcsscss-transitions

Angular 14: Exploring the left datepicker panel navigation in PrimeNG

In my situation, I am trying to adjust the position of the date-picker in relation to a panel displayed within a <p-calendar> element. Due to a splitter on the right side, I need to shift the date-picker towards the left. Here is the HTML code: < ...

cssangulardatepickercalendarprimeng

concealing elements using negative margins on tablet devices

I have an animated element on the ipad, moving from -200px to 1500px and being hidden due to overflow-x:hidden in the browser. However, when viewing this on the ipad, I am able to scroll "off screen" and reveal the hidden items, despite setting the body a ...

cssipadcss-transformsmargins

Designing a layout with one box on top and two beneath it, covering the entire page, can be achieved by following these steps

https://i.sstatic.net/A1eUh.png I am currently working on a project where I want to divide the screen into three sections. One section will cover half of the screen to display an image slider, and the remaining half will have two sections which is already ...

javascriptjqueryhtmlcss

I'm trying to position this div within a table so that it lines up with one of the cells. Can you help me figure out

After implementing the code, here is the current output: <table><tr> <td><div id="adt"></div></td> <!-- 336x280 ad code --> <td id="butw"><div id="butto">Follow @Twitter</div></td> ...

htmlcsshtml-tablealignment

In Firefox, the CSS height and width values are displayed as X pixels, whereas in Internet Explorer, they are automatically set to 'auto'

When it comes to measuring div box dimensions, jQuery can be a handy tool. Here is an example code snippet: $(document).ready(function(){ var h = $("#testbox").css("height"); }); Interestingly, the same code can give different results in different brow ...

javascriptjquerycssinternet-explorer

The issue of the highlighted row not disappearing persists even after clicking on the adjacent table row

When selecting the gear icon for the menu option in a table row, I would like the background to turn yellow. I attempted the following code to highlight the table row: var view = Core.view.Menu.create({ model: model, menuContext: { ibmm: ibmm }, ...

javascriptjquerycssember.jsember-1

Whenever I create the code using javascript, padding seems to always show up

I have a basic stacked row layout that displays an upper box and lower box without any padding. <span id="route" class="small"> <div class="row" style="border-style:solid;"> <div class="col-md-12 col-12"> <p>UpperBox</p& ...

javascriptcsstwitter-bootstrap

Tips for aligning an element to the bottom of its container

Can you please make some major edits and then re-open? I am currently developing a page using Bootstrap 2.3.2, which will eventually serve as a template for Joomla 3.x. Within the header section, I have successfully positioned 6 elements as per the desi ...

htmlcsstwitter-bootstraptwitter-bootstrap-2

Display React elements on the web page

Seeking assistance from anyone! I've been grappling with a problem and can't seem to figure out a solution. Here's the scenario: My current setup involves a sidebar and a top bar for navigation in React. Check out my app so far in this imag ...

javascriptcssreactjstypescriptreact-router