Search code examples
windows-8windows-runtimewindows-store-appswinjs

Remove X button in input - Metro


I write a Metro program in Javascript. The problem is Windows8 automatically adds an X button to it. Now how to edit or remove that button? Below is my layout, the X button overlaps the email input.

enter image description here


Solution

  • Details are here: http://msdn.microsoft.com/en-us/library/windows/apps/hh465498.aspx

    You need to use the -ms-clear pseudo element, and style it either as you need it, or display none it:

    input::-ms-clear {
        display: none;
    }
    

    Note that you likely want to not display none it, since this removes the easy-to-touch X that removes the current input.