在鼠标上隐藏搜索文本框关闭按钮

这是小提琴的代码。

<input id="Search" name="Search" type="search" placeholder="Search" />

类型后在文本框的一些单词，并单击出方的文本框，即关闭按钮消失，并且在鼠标移动到文本框，再次证明关闭按钮显示。

我不想在鼠标上显示该关闭按钮，只有在文本框为焦点时才显示该关闭按钮。

任何人都可以帮我找到解决这个问题的办法。

2017-07-31 test test

你的意思是隐藏它在悬停上显示焦点 - 像这样？ http://jsfiddle.net/5XKrc/980/ – CBroe

@CBroe，是的，让我试试我的代码 –

@CBroe，你可以添加答案，我会接受答案，你的解决方案对我很有帮助 –

-1

在你的CSS补充一点：

#Search:hover::-webkit-search-cancel-button{ 
    display:none; 
} 
#Search:focus::-webkit-search-cancel-button{ 
    display:block; 
}

这将是工作。

2017-07-31 10:02:22

可以隐藏在悬停状态下的按钮，并在对焦状态表现出来：

#Search:hover::-webkit-search-cancel-button{ 
    display:none; 
} 
#Search:focus::-webkit-search-cancel-button{ 
    display:block; 
}

（后者是必要的，因为悬停和重点可以在同一时间申请 - 所以，如果你想要它当你将鼠标悬停在已经聚焦的区域上时，你需要再次看到它。）

2017-07-31 10:28:46 CBroe

这是确切的与另一个相同的答案发布半小时前... –

@BrianH。是的，如果你看看评论，那是我在小提琴中提出的解决方案。通常我不介意，但由于其他答案似乎只是我的建议的完全剥夺，我决定添加我自己的答案... – CBroe

回答