Enhancing Bootstrap5 Form Floating and Form Control input fields with the addition of close buttons or 'x' clear text icons

Incorporating Bootstrap 5, my goal is to enhance the user experience by adding a close button to form floating and form control input fields for easy text clearing on mobile devices. However, the implementation is not functioning as anticipated. I am seeking a simple 'x' symbol positioned at the right end of the input fields, similar to the search field example highlighted here.

Below is a basic reproduction of the examples from the documentation with the expected close button included:

<head>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="67050808131413150617275249564957">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3658575b5376534e575b465a531855595b">[email protected]</a>">
  <button type="button" class="btn-close" disabled aria-label="Close"></button>
  <label for="floatingInput">Email address</label>
</div>
<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <button type="button" class="btn-close" disabled aria-label="Close"></button>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d737c70785d78657c706d7178337e7270">[email protected]</a>">
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8eece1e1fafdfafceffecebba0bea0bea3ecebfaefbc">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</html>

What could be the issue with my approach?

I acknowledge that I might be missing something obvious, as I haven't come across any Bootstrap 5 examples addressing this specific functionality. Please excuse the simple question.

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

"I am looking for a simple 'x' that appears at the end of text input, similar to the search field in the example provided."

The 'X' symbol in the example is part of a search type input field...

<div class="form-floating mb-3">
  <input type="search" class="form-control" id="floatingInput" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="117f707c74517469707c617d743f727e7c">[email protected]</a>">
  <label for="floatingInput">Email address</label>
</div>

Alternatively, you can create an input group like the one shown in this related question

       <div>
            <label for="exampleFormControlInput2" class="form-label">Email address</label>
            <div class="input-group">
                <input class="form-control border-end-0 border" type="email" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abc5cac6ceebced3cac6dbc7ce85c8c4c6">[email protected]</a>" id="exampleFormControlInput2">
                <span class="input-group-append">
                    <button class="btn btn-white border-start-0 border" type="button">
                        <i class="bi bi-search"></i>
                    </button>
                </span>
            </div>
       </div>

Codeply

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

Issue with Registration Form Redirection

This registration form has been created using a combination of HTML, PHP, and MYSQL. However, after filling out the form and submitting it, the page simply reloads. I'm unsure if there is an issue with my PHP or HTML code. I'm at a loss as to w ...

phphtmlmysql

Mandatory tick box needed for submitting PHP form

Although the topic of PHP form validation is frequently discussed, I am a complete beginner in PHP and I am currently experimenting with a PHP form script that I discovered here. As a result, I am unsure about how to proceed with incorporating two specific ...

phphtmlformsvalidation

After sending a post request, the form in HTML with Node.js is returning an undefined response

Upon creating an HTML <form></form> object to capture a username, email, and password, I encountered an issue where the value returned is always undefined when accessing req.body.name or any other field. It seems like the form is not functionin ...

htmlnode.jsforms

Updating Twitter Bootstrap Tooltip content when clicked

Is it possible to update the content of a tooltip on an anchor element that triggers an AJAX request when clicked? The element is equipped with a Bootstrap tooltip, and I need the tooltip content to be modified once the AJAX response is received. What ar ...

jquerytwitter-bootstraptooltip

The properties of the box model applied to unidentified inline boxes

Reference: CSS Specification Text directly contained inside a block container element (not within an inline element) is considered as an anonymous inline element. For example, in an HTML document like this: <p>Some <em>emphasized</em> ...

css

Where is the best place to implement HTML form validation: on the frontend or backend?

Is it important to validate all values before submitting the form to the backend server, as mentioned in the title? ...

javascriptphphtmlformsapi

Svelte remains static and is not experiencing re-rendering

I am currently incorporating the history component in Svelte, where it should display when changes occur in the bids array. const bidsArray = [ { player: 0, bidType: 'pass' }, { player: 1, bidType: 'level', level: '1&apos ...

javascripthtmlsvelterenderrerender

I am experiencing an issue with Bootstrap's Jumbotron where the bottom border is not visible even after setting it. I am quite curious as to why

I'm new to using bootstrap and I've encountered an issue with the Jumbotron class. Specifically, I have set a border for the Jumbotron and it appears on the top, left, and right sides, but for some reason, the bottom border is missing. After goi ...

htmlcsstwitter-bootstrapborder

What is the functionality of background attachment fixed?

I am curious about how background images behave when the background-attachment property is set to fixed. Here are my questions: If I set a background image for a div with dimensions of 500px by 500px and add a 1px solid red border, then apply backgro ...

htmlcss

Attempting to apply custom styles to jQuery components using CSS

Looking to restyle the black bar on my test page located at The black bar with 3 tabs about halfway down the page needs a new color scheme. By inspecting with FireBug, I found these elements: <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ...

jquerycss

"Manipulating a drop-down menu in HTML with data from a MySQL database using PHP

Hello there, I could use some assistance. I am working on a straightforward web application and require help with a specific task. Here's the scenario: I have an HTML form with a single combo box. I would like to populate this combo box with data fro ...

phphtmlmysqlforms

Center the image within a Grid item using Material UI's alignment feature

I am currently utilizing the Grid component from Material UI. I'm facing an issue where the image inside a Grid item is aligned to the left instead of being centered. <Grid container direction="row" justify="center" alignIte ...

cssreactjsmaterial-ui

Conceal the rating of WordPress products when they have no ratings

I am looking to remove the star ratings under the title for products with empty reviews. I specifically want to hide the stars without allowing users to leave a new review. I found a similar solution for hiding a different element and attempted to customiz ...

javascriptphpcsswordpress

Avoid triggering the parent modal to close when a child element is clicked in VueJS

In my Vue application, there is a situation where I have a button called "detach button" with a @click function inside an element that is clickable. When clicking on this parent element, it triggers another @click function and toggles a Bootstrap modal eve ...

javascripttwitter-bootstrapvue.js

Tips for adjusting the div style when resizing the browser

As I work on a script, I encounter an issue where the style of a div should change when it becomes larger due to resizing. Even though I have come up with a solution for this problem, there are still some inconsistencies. Sometimes the width is reported a ...

javascripthtmlcss

[Vue alert]: Issue in created function: "TypeError: Unable to assign value to undefined property"

I'm currently in the process of developing a VueJS application where I have implemented a child component called Child.vue that receives data from its parent. Child.vue export default{ props:['info'], data: function(){ ...

javascripthtmlvue.jsvuejs2vue-component

Display or conceal button according to user SESSION in PHP for each iteration loop

How can I dynamically hide or show a remove button based on whether a user has uploaded a specific image? The issue arises because the remove button is within a foreach loop. if($user_id == $_GET['id'] It currently shows every button, but wh ...

phphtmlmysqlpdo

Sophisticated Sidebar Design using Bootstrap 5

Looking to design a responsive sidebar for navigation on my page, with selected and hover properties. Visualizing the selected option to appear like this: Selected (active) option in sidebar The goal is to have the image cover the left side of the backgr ...

javascripthtmlcss

Utilizing jquery's .find() method to tally up elements, while excluding any elements located inside a specific div

I am looking for a solution to tally specific child elements, excluding those housed within an element with a certain class. To count elements, I currently use $('.search-me').find('[class*=seI\\-]').length within a div conta ...

jqueryhtmlfind

Mouse over condensed text to show more information without impacting nearby elements

I have implemented a text-overflow: ellipsis on an element, and then added a hover effect to expand the text. How can I prevent this expanded text from affecting other elements above or below it? Here's how I've set the text: .box h3 { overfl ...

jqueryhtmlcss