2

I have 1 field form for search input. Here the HTML 

            <form class = "search-form hide-on-mobile">
                <input class = "global" type = "text" placeholder = "Who are you looking for ?">
                <button class = "search-reset hide-on-mobile hide-on-tablet" type = "reset" value = ""><i class = "clear-search"></i></button>
            </form>

and the CSS :

::-webkit-input-placeholder { color : #FFFFFF; }
:-moz-placeholder { color : #FFFFFF; }
::-moz-placeholder { color : #FFFFFF; line-height : 32px; opacity : 1; }
input:-ms-input-placeholder { color : #FFFFFF; }

.search-form input[type="text"] {
background         : #78C1DC url("../img/search-icon.png") no-repeat 10px 6px;
border             : 3px solid #61A8C4;
color              : #FFFFFF !important;
font-size          : .8em;
height             : 42px;
padding            : 0 0 6px 40px;
width              : 100%;
-webkit-box-sizing : border-box;
-moz-box-sizing    : border-box;
box-sizing         : border-box;
-webkit-box-shadow : none;
-moz-box-shadow    : none;
box-shadow         : none;
-webkit-appearance : textfield;
-moz-appearance    : textfield;
-webkit-appearance : textfield;
appearance         : textfield;
-webkit-transition : ease-in 200ms; -moz-transition : ease-in 200ms; -ms-transition   
    : ease-in 200ms; -o-transition : linear 200ms; transition : ease-in 200ms;
    }

.search-form input[type="text"]:focus {
border              : 3px solid #006687;
background          : #6BB2CD url("../img/search-icon.png") no-repeat 10px 6px;
box-shadow          : none;
color               : #FFFFFF;
font-size          : .8em;
outline             : none;
padding            : 0 0 6px 40px;
text-shadow         : 1px 1px 1px rgba(0, 0, 0, 0.5);
-moz-appearance     : textfield;
-webkit-appearance  : textfield;
appearance          : textfield;
-webkit-text-shadow : 1px 1px 1px rgba(0, 0, 0, 0.5); -moz-webkit-text-shadow : px    
    1px 1px rgba(0, 0, 0, 0.5); -ms-webkit-text-shadow : px 1px 1px rgba(0, 0, 0, 0.5);  
    -o-webkit-text-shadow : px 1px 1px rgba(0, 0, 0, 0.5); webkit-text-shadow : px 1px  
    1px rgba(0, 0, 0, 0.5);
-webkit-transition  : ease-in 200ms; -moz-transition : ease-in 200ms; -ms-transition 
    : ease-in 200ms; -o-transition : linear 200ms; transition : ease-in 200ms;
    }
.search-form button[type="reset"] {
background         : #6BB2CD;
box-shadow         : none !important;
border             : none;
border-radius      : 40px;
color              : #FFFFFF;
font-size          : 10px;
position           : relative;
-moz-appearance    : none;
-webkit-appearance : none;
appearance         : none;
top                : -32px;
right              : 20px;
float              : right;
width              : 20px;
height             : 20px;
}

On another browser there is no problem, but when i test on IE 10, when we type something on input field another reset button was appear. This unknown element only appear when input get focus.

Anyone know what causing it?

Thanks,

Hendra Nucleo
  • 591
  • 4
  • 17
  • share all of your code, even better, make a fiddle for us top lay with...its not clear @ all...but what is the <i> element doing in the <button>? it has a class of clear-search, so i'll bet not only is that it, but its functionality is intertwined with the <button>s...look into that...@ the very least something is moving and its showing. or perhaps on :hover,:active,:focus it merely is becoming visible? see if its getting display:block/visibility:visible when the button has one of those states – albert Feb 12 '14 at 10:10
  • Thanks for your comment, i think it was clear "default reset button by IE" and it was already remove with ::-ms-clear { display: none; } – Hendra Nucleo Feb 13 '14 at 12:16
  • nothing is clear here....but whatever. if that answer worked for you, you should accept it and give that guy some credit. and would have saved me the time i wasted trying to help you. not bitter, just annoyed. that answer was already posted when i started helping this question. – albert Feb 13 '14 at 20:59
  • I think your question can have the right explantion in this stakoverflow similar question [link] http://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs – bau Jun 02 '14 at 16:23

1 Answers1

0

Try this 

.global:-ms-clear {
    display: none;
}
Anirudha Gupta
  • 8,248
  • 8
  • 49
  • 71