Geek Answers Handbook

What is the -ms-explicit equivalent in WebKit and Mozilla?

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

Are Mozilla and Webkit Equivalent Options Available? The clear text input button is suitable for touch screen applications. I don’t want JavaScript workarounds and easy CSS fixes to be very useful.

I already know that this is possible using JavaScript, but IE 10 has a built-in solution for displaying the clear button, and I wonder if other browsers have similar options?

+4
source share
4 answers

Short answer: None.

You cannot use CSS to create a button that clears input content without using JavaScript.

The clear button is built into IE10. -ms-clear not what generates it, but just a way to tweak it for styling.

It should be noted that the <input type=search>​ field <input type=search>​ Chrome will also give you a clear button, but not in the normal <input type=text>​

+8
source

I was looking for the same problem, so I made a jQuery ( TextClear ) plugin to offer the exact same function:
here is the link

and about the trick behind this:

  • set the background image in the text input field and put it in the right corner, for example
 { background-image: url('imagesUrl'); background-repeat: no-repeat; background-position: right center; background-size: 10% 90%; padding-right: 1%; }
  • And then handle the click event on it by copying its position (you can also check the source code for detailed logic)
+2
source

You cannot do this with css ..

But you can use the user jQuery and its simple. All you have to do is ...

HTML code:

 <form id="myform" method="post"> <input type.... /> <input type.... /> <input type.... /> <input type="button" id="clear" name="clear" /> </form>

JQuery Code:

 $("#clear").click(function(){ $("#myform").reset(); });

And it will work. But a form tag is needed.

0
source

U have NO like Javascript? See how easy jQuery accomplishes this process:

Markup

 <form> <input type="text"> <button>X</button> </form>

JQuery

 $("form").on("click", "button", function() { $("input").val(""); return false; });​​​​​

http://jsfiddle.net/QyE92/

Using CSS, you can mark a button and place it accordingly to accurately simulate the “x” in the metro interface.

0
source

More articles:


All Articles