删除/隐藏由 IE 10 创建的默认表单输入重置按钮答案

【问题标题】：Remove/Hiding default Form input reset button creating by IE 10删除/隐藏由 IE 10 创建的默认表单输入重置按钮
【发布时间】：2014-02-12 01:17:37
【问题描述】：

我有 1 个用于搜索输入的字段表单。这里是 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>

和 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;
}

在另一个浏览器上没有问题，但是当我在 IE 10 上测试时，当我们在输入字段中键入内容时，会出现另一个重置按钮。此未知元素仅在输入获得焦点时出现。

有人知道是什么原因造成的吗？

谢谢，

【问题讨论】：

分享你所有的代码，更好的是，为我们做一个小提琴......它不清楚@ all......但是什么是 <i> ; 元素在 <button> 里做什么？它有一个 clear-search 类，所以我敢打赌不仅是它，而且它的功能与 <button>s 交织在一起...看看那个...@至少有什么东西在动和它的表现。或者也许在 :hover,:active,:focus 上它只是变得可见？当按钮具有这些状态之一时，看看它是否得到 display:block/visibility:visible
感谢您的评论，我认为“IE 默认重置按钮”很明确，并且已经使用 ::-ms-clear { display: none; }
这里没有什么是清楚的......但无论如何。如果那个答案对你有用，你应该接受它并给那个人一些信任。并且会节省我试图帮助你的时间。不苦，只是生气。当我开始帮助这个问题时，这个答案已经发布了。
我认为您的问题可以在这个 stakoverflow 类似问题中得到正确的解释 [link] stackoverflow.com/questions/14007655/…

标签： html css internet-explorer-10

【解决方案1】：

试试这个

.global:-ms-clear {
    display: none;
}

【讨论】：