'x' not displaying in Firefox inputs when using type="search" with custom CSS

Question

I have been searching Stack Overflow answers for previous question but none seem to be helping for my Firefox issue.

I have all my inputs as type="search" and then some CSS to display a clear button which appears to be working in Edge, IE, Chrome but not in Firefox.

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  border-radius: 50em;
  background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
}

input[type="search"]:hover::-webkit-search-cancel-button {
  opacity: .3;
  pointer-events: all;
}


/* Doesn't displays the 'X' when input 'Disabled' */

input[type="search"]:disabled::-webkit-search-cancel-button {
  -webkit-appearance: none;
  background: none;
  cursor: not-allowed;
}

<input class="form-control mand" type="search" />

Screenshots

Chrome/IE/Edge

FF

Chrome etc the 'x' is displayed onhover and onfocus but never in FF which I find peculiar as I'm using a Fontawesome image.

I have also tried just using

input[type="search"] {
    background: transparent 
        url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg);
    background-position: 7px 7px;
    background-repeat: no-repeat;
    background-position: 2px 3px;
}

but still nothing. I reference the above from another post here.

Is Firefox supposed to support all that `::-webkit-search-…` stuff, have you verified that? — CBroe, Jan 22 '21 at 09:13
Look here, https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-search-cancel-button — en0ndev, Jan 22 '21 at 09:15
@mplungjan the input has to contain a value for it to display. The update you made to my post to allow the snippet is working for me — murday1983, Jan 22 '21 at 09:15
As the name suggests, `-webkit-search-cancel-button` is not a standard pseudo-element but a proprietary feature of the webkit browser engine. In general, you don't have such a high degree of control on widget styling, esp. on complex ones. — Álvaro González, Jan 22 '21 at 11:17

score 1 · Accepted Answer · answered Jan 22 '21 at 12:02

According to MDN Web Docs, Firefox does not support ::-webkit-search-cancel-button, and it advises against its use use in serious websites. I advise you look at some of the answers to this question. The most-upvoted option doesen't appear to work in Firefox, but some of the ones below it appear to do just what you want. This answer looks good, as it requires no JS. It's not the nicest looking one on the page, but I'm sure you can sort that out.

en0ndev · Answer 2 · 2021-01-25T11:43:26.013

This will solve your question.

"I reference the above from another post here"

You can put icons next to inputs like this. Thus, you can avoid browser support problems.

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>

body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

.input-container {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 100%;
  margin-bottom: 15px;
}

.icon {
  padding: 10px;
  background: #fff;
  color: #000;
  border:1px solid #000;
  border-right:none;
  min-width: 50px;
  text-align: center;
  font-size:20px;
}

.input-field {
  width: 100%;
  font-size:20px;
  padding: 5px;
  outline: none;
  border:1px solid #000;
  border-left:none;
  color:#000;
}
  
  .input-field::placeholder {
    color:#000;
  }

</style>
</head>
<body>
<form action="" style="max-width:500px;margin:auto">
  <div class="input-container">
    <i class="fa fa-user icon"></i>
    <input class="input-field" type="text" placeholder="Username" name="usrnm">
  </div>
  </form>
  </body>

'x' not displaying in Firefox inputs when using type="search" with custom CSS

2 Answers2

Linked