What is -ms-clear equivalent in WebKit and Mozilla?

Question

As shown here: http://msdn.microsoft.com/library/windows/apps/Hh465498

Do Mozilla and Webkit have equivalent options? The clear button on text inputs is good for touch screen apps. I don't want any JavaScript workarounds and an easy CSS fix would be very helpful.

I already know this is possible with JavaScript, but IE 10 has an inbuilt solution for displaying clear button, and I'm wondering if any other browsers have similar options?

Answer 1

The short answer is No.

There is no way to use CSS to generate a button that will clear the contents of an input without the use of JavaScript.

The clear button is built in functionality to IE10. -ms-clear is not what generates it, but simply a way to target it for styling.

I should mention though, that the <input type=search>​ field in Chrome will give you a clear button as well, but not on normal <input type=text>​ fields.

Answer 2

Was looking for same issue so I made a jQuery plugin (TextClear) to offer the same feature :
here is the download link

---

and about trick behind this:

• set background image on input text field and position it to the right corner like

{
  background-image: url('imagesUrl');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 10% 90%;
  padding-right: 1%;
}

• And then handling click event on it by mapping its position (you can check the source code as well for detailed logic)