検索ボックスを非表示にする

Question

これを見てください：Click here for jsfiddle

ここはフィドルのコードです。

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

タイプした後、いくつかのテキストボックスに単語やサイドにテキストボックスをクリックすると、その閉じるボタンが消えており、テキストボックスの上にマウスの上に、再びその閉じるボタンは表示があります。

マウスの上にその閉じるボタンを表示したくない場合、その閉じるボタンは、テキストボックスにフォーカスがある場合のみ表示されます。

誰でもこの問題の解決策を見つけるのを手伝ってくれます。

Answer 1

はあなたのCSSでこれを追加します。

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

そして、それが仕事になります。

Answer 2

あなたがホバー状態でボタンを非表示、およびフォーカス状態でそれを表示することができます

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

（ホバーとフォーカスが同時に適用することができるので、後者が必要である - ので、あなたがそれをしたい場合既にフォーカスされたフィールド上にマウスを乗せているときに再び表示されるようにするには、後者のルールも必要です）。