<div class="input-group position-relative d-inline-flex align-items-center">
<input class="form-control " formControlName="textInput" type="text" value="">
<i class="bi bi-search position-absolute"
style="
right: 10px;
cursor: pointer;
z-index: 100;">
</i>
</div>
https://codesandbox.io/s/bootstrap-5-playground-forked-z65ldi?file=/index.html
“I’m after a simple ‘x’ on the right end that’ll show after text
input, as shown in the search field in this example.”
The ‘X’ is that example is simply a search type input…
<div class="form-floating mb-3">
<input type="search" class="form-control" id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">Email address</label>
</div>
Or, use an input group as explained in this similar 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="[email protected]" 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>
With Bootstrap 5 I’d like to add a close button to form floating and form control input fields so users can easily clear text on mobile, but it’s not working as expected. I’m after a simple ‘x’ on the right end that’ll show after text input, as shown in the search field in this example.
Minimal reproduction of examples from docs with the close button I expected to work inserted:
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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="[email protected]">
<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="[email protected]">
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</html>
What am I doing wrong?
I might be doing something stupid, but I can’t find any examples on this for Bootstrap 5, so please forgive the dumb question.
I guess you might need to add that manually. I don’t came across any official docs from bootstrap providing that functionality.
This code doesn’t seem to show “x” nor can I find
Yes it does show the X when you enter text in the input. It’s the standard
Chrome adds the x, other browsers don’t. How can we enforce the x when using Bootstrap?