以CSS消滅IE 10的文字框的「消除」功能

微軟推出了IE 10一段時間,在試用過後,這個新的IE比先前的IE 9性能上更快,CSS3的對應也優於先前的版本,雖然我對強制在Windows 7的IE 10套用個人覺得全不討好的Windows 8 Metro UI風格一事上真的不敢恭維。

在Developer tool中IE 7 / 8 / 9 都用Metro UI,這算啥回事!

另外,IE 10「溫馨地」在input單行文字框加了一個無敵的功能──當文字框裡有文字兼onfocus時,會出現一個消除框中內容的小交叉。

看圖(喔!前面的那一個才是):
ie10-input-field-with-cross

這可不是一個普通的「X」,而是用Wingding 2字款顯示出來的一個不折不扣的「交叉」!

當然,世界不是只有IE,更不是只有IE 10… 不少網站早就用javascript在文字框加進了消除功能,結果…… 就是要找出個方法去消滅這個微軟IE團隊充滿愛心的雞肋交叉。於是IE 10又內建了有一個很有愛的vendor specific CSS,去供我們這些不懂愛的人去把這雞肋交叉解決掉:

input[type=text]::-ms-clear {
  display: none;
}