My Bootstrap 4 form includes various types of inputs, some for numbers, some for text, and others for email.
I have managed to style the text inputs to display a cancel button inside with the following code:
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
Now, I want to achieve the same effect for my number and email inputs.
I attempted to modify the code for the search input, but it did not work as expected.
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
Additionally, I have used CSS to remove the arrows for number inputs and it has been successful:
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
Before resorting to regex for my number inputs, I wanted to explore other options.
https://i.sstatic.net/2Csg6.png
HTML
<input id="one" class="form-control" type="search" value="Test company name" />
<input id="two" class="form-control" type="number" value="123456" />
<input id="two" class="form-control" type="number" value="12345634" />
As shown, the number inputs do not display arrows, which is the desired outcome.