CODEWITHSUNDEEP
htmlcss
murday1983
murday1983

Reputation: 4016

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

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

enter image description here

FF

enter image description here

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.

Upvotes: 2

Views: 8620

Answers (2)

en0ndev
en0ndev

Reputation: 692

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>

Upvotes: 0

Llamax
Llamax

Reputation: 337

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.

Upvotes: 1

Related Questions