Is it possible to reset the value of an input field with type "number" similar to how it can be done with type "search"?

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.

Answer №1

Let me share some updates with you. Firstly, the not-so-great news: the webkit cancel button can only be used with input fields that have the type set to search.

But wait, here's the silver lining: you have the power to create your own cancel button.

Simply copy and paste the CSS snippet provided below:

.close-button {
  color: #1e52e3;
  font-size: 12pt;
  font-family: monospace,sans-serif;
  font-weight: 600;
  position: absolute;
  z-index: 2;
  display: none;
}

.close-button:hover {
  cursor: pointer;
}

After that, adjust the font size to your liking through trial and error.

Then, insert the following JavaScript code just before the closing </body> tag in your HTML document:

<script>
var fields = document.querySelectorAll('input[type=number],input[type=email]');

fields.forEach(function(input) {
  let x = document.createElement('span');
  x.classList.add('close-button');
  x.innerHTML = 'x';
  x.style.left = input.clientWidth - 15;
  x.onmousedown = removeContent;
  input.parentNode.insertBefore(x, input);
  input.oninput = toggleCloseButton;
  input.addEventListener( 'focusin', toggleCloseButton);
  input.addEventListener( 'focusout', hideCloseButton);
});

function toggleCloseButton() {
   if (this.value.length > 0) {
     this.previousSibling.style.display = 'block';
   } else {
     this.previousSibling.style.display = 'none';
   }
}

function hideCloseButton() {
  this.previousSibling.style.display = 'none';
}

function removeContent(){
  this.nextSibling.value = '';
  this.nextSibling.focus();
}
</script>

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

Why is this strange red dot character 🔴 appearing in the URL in FireFox?

While browsing the web, I came across a website with a strange red blob in the URL. It's something I've never seen before. What could possibly be the reason for this unique feature?! Note that you have to visit the page to see it for yourself. T ...

What causes the button's frame color to change when I click on it?

I am facing an issue with a button I created. When I click the button, the frame color changes and I cannot figure out why. I have attached images showing the button before and after it is clicked. Before: https://i.sstatic.net/5jpB1.png After: https://i ...

Issue with vertical cell alignment in MUI x-data-grid persists following the latest update to version 7.2.0

After updating my MUI app to the latest npm packages version, specifically upgrading x-data-grid from 5.17.9 to 7.2.0, I encountered an issue. In my application, I utilize a grid where certain columns are populated using the renderCell property: const cel ...

ConnectionError: 404 Page Not Located

Why am I receiving downvotes? This is the second time I've been downvoted. Please, at least tell me the reason so that I can improve. I am currently using the jQuery get method to send data from HTML to PHP (both are hosted on localhost/Site1). Edit ...

Issue with jQuery dropdown navigation bar

I am interested in creating a drop-down menu using jquery (here's the corresponding jsFiddle). HTML: <ul id="mainmenu"> <li><a href="http://myszki/">Aktualności</a></li> <li class="parent item13"><a href=" ...

What is the best way to adjust the mobile screen size to display the most optimized version of a web app's

Currently, I am utilizing react, Bootstrap, and some custom sass to construct and style the front end of my web application. While the design appears good on mobile devices, there is an issue where users need to pinch the screen due to it looking slightly ...

Creating a bespoke scrollbar using Material UI

What is the best way to implement a custom scrollbar in Material UI? I have spent a lot of time researching how to add a custom scrollbar and I finally found a solution that works. Thanks to everyone who helped me along the way. ...

Ways to prevent blank class from occupying space until filled with Javascript

I've been working on a checkout calculator using JavaScript, and here's how I'm inputting the data: <p class="car-rent-class-info h6 pb-1"></p> <p class="car-rent-pickupdropoff-info h6 pb-1"></p> <p class="car-ren ...

CSS - Problem with image display and hover functionality

I am facing an issue with hover effect on an image. The hover works fine but the original image remains visible above the hovered image. I have attempted to use z-index to fix this problem without success. Below is the CSS code: #login, #logout { fl ...

What is the best way to center a rotated element and have it aligned to the top?

* { box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; margin: 0px; } .we-adopt { background-color: #8a8484; color: #ffffff; padding: 88px 0px; height: 100px; } .we-adopt-list span { display: i ...

Repairing the base navigation interface and correcting the hyperlink to redirect to a different webpage

Can anyone assist with aligning my bottom navigation bar and fixing a link issue on both navigation bars? I've been struggling to center it. Do you think using padding could solve the problem? I've tried guessing the pixel count, but to no avail ...

Tips for saving the circular slider value to a variable and showcasing it in the console

I have coded a round slider and need assistance with storing the slider value in a variable and displaying it in the console using JavaScript. I want to store the tooltip value in a variable for future use. $("#slider").roundSlider({ radius: 180, min ...

Enhancing PHP Markdown to Support Custom CSS Classes

Markdown is a tool I use frequently in my PHP projects, but sometimes I find its output to be too simplistic. I wish I had more control over the layout and design of my content. For example, when inserting an image: <p> <img src="path/to/image. ...

Tips on concealing a div until the value of a specific field surpasses zero

In order to ensure that users focus on the first section of the form before proceeding, I plan to hide the last section until a specific field has a value greater than zero. Check out my HTML code below: <div class="fieldcontainer"> <label>E- ...

How can I use jQuery to transform a div with its elements into a canvas?

Looking for a way to convert a HTML Div and its elements to canvas, and then the canvas to an image using Jquery. I've checked out a website that only converts the whole HTML page, but I need a solution for converting specific Div elements. Any help w ...

Choosing a request date that falls within a specified range of dates in PHP Laravel

In my database, I currently store two dates: depart_date and return_date. When a user is filling out a form on the view blade, they need to select an accident_date that falls between depart_date and return_date. Therefore, before submitting the form, it ne ...

Guide to vertically centering Font Awesome icons inside a circular div

Is there a way to perfectly center align font awesome icons vertically? I have tried using the line-height property when text is present, and even setting the line-height equal to the height of the div. Attempts with display:inline-block and vertical-alig ...

What is preventing my accordion from closing completely?

I'm currently working on creating FAQ questions in an accordion format. However, I've encountered an issue where adding padding around the answer section prevents the accordion from closing completely. Removing the padding solves the problem, but ...

Is there a way for me to have a table automatically scrolled to a specific column upon loading the HTML page?

My table contains a dynamic number of columns based on the months inputted from the database starting from a start_date and ending at an end_date. I have the current_date stored as a variable and want the table to load with the x-scrollbar positioned right ...

Adjust the panel size accordingly for smaller screens

My application is utilizing the Spotify API to retrieve names and images. These are then displayed on my webpage within cards/panels in the following format: <div class="col-md-4" v-if="type == 'tracks'" v-for="(track, index) in tracks"> ...