2

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.

Improve this question
4
  • Is Firefox supposed to support all that ::-webkit-search-… stuff, have you verified that? Commented Jan 22, 2021 at 9:13
  • Look here, developer.mozilla.org/en-US/docs/Web/CSS/… Commented Jan 22, 2021 at 9: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 Commented Jan 22, 2021 at 9: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. Commented Jan 22, 2021 at 11:17

2 Answers 2

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.