CSSのコンテンツは、Firefoxで期待どおりに機能しません

Question

私がしていることは、検索ボックスにユーザーが検索キーワードを入力すると、閉じるボタン（具体的には「x」文字、リセットボタンの後にコンテンツとして埋め込まれます）検索ボックスの内容をクリアします。

ChromeとIEの両方でうまく動作しますが、Firefoxではうまく動作しません。

どんな種類のヘルプが高く評価されます。

.search-box,.close-icon,.search-wrapper { 
 
\t position: relative; 
 
\t padding: 10px; 
 
} 
 
.search-wrapper { 
 
\t width: 500px; 
 
\t margin: auto; 
 
\t margin-top: 50px; 
 
} 
 

 
.search-box:focus { 
 
\t box-shadow: 0 0 15px 5px #b0e0ee; 
 
\t border: 2px solid #bebede; 
 
} 
 
.close-icon { 
 
\t border:1px solid transparent; 
 
\t background-color: transparent; 
 
\t display: inline-block; 
 
\t vertical-align: middle; 
 
    outline: 0; 
 
    cursor: pointer; 
 
} 
 
.close-icon:after { 
 
\t content: "X"; 
 
\t display: block; 
 
\t width: 15px; 
 
\t height: 15px; 
 
\t position: absolute; 
 
\t 
 
\t z-index:1; 
 
\t right: 35px; 
 
\t top: 0; 
 
\t bottom: 0; 
 
\t margin: auto; 
 
\t padding: 2px; 
 
\t border-radius: 50%; 
 
\t text-align: center; 
 
\t color: black; 
 
\t font-weight: normal; 
 
\t font-size: 12px; 
 
\t 
 
\t cursor: pointer; 
 
} 
 
.search-box:not(:valid) ~ .close-icon { 
 
\t display: none; 
 
}

<div class="search-wrapper"> 
 
\t <form> 
 
\t <input type="text" name="focus" required class="search-box" placeholder="Enter search term" /> 
 
\t \t <button class="close-icon" type="reset"></button> 
 
\t </form> 
 
</div>

Answer 1

このコードは

.search-box,.search-wrapper { 
 
\t position: relative; 
 
\t padding: 10px; 
 
} 
 
.search-wrapper { 
 
\t width: 500px; 
 
\t margin: auto; 
 
\t margin-top: 50px; 
 
} 
 
.search-box 
 
{ 
 
    width:300px; 
 
} 
 
.search-box:focus { 
 
\t box-shadow: 0 0 15px 5px #b0e0ee; 
 
\t border: 2px solid #bebede; 
 
} 
 
.close-icon { 
 
\t border:1px solid transparent; 
 
\t background-color: transparent, 
 
\t display: inline-block; 
 
\t vertical-align: middle; 
 
    outline: 0; 
 
    position: absolute; 
 
    top:19px; 
 
    left:305px; 
 
\t z-index:1; 
 
\t padding: 1px 2px; 
 
\t border-radius: 50%; 
 
\t text-align: center; 
 
\t color: black; 
 
\t font-weight: normal; 
 
\t font-size: 12px; 
 
\t 
 
\t cursor: pointer; 
 
} 
 

 
.search-box:not(:valid) ~ .close-icon { 
 
\t display: none; 
 
}

<div class="search-wrapper"> 
 
\t <form> 
 
\t <input type="text" name="focus" required class="search-box" placeholder="Enter search term" /> 
 
\t \t <button class="close-icon" type="reset">X</button> 
 
\t </form> 
 
</div>

に注意助けるべきである：あなたの.search-boxwidthを設定し、それに応じてを設定あなたの21032の.close-icon

Answer 2

このコードを試してください：あなたの問題を解決したいと思っています。 widthの "outer_box"クラスを調整します。

<style> 
.search-box, .search-wrapper { 
    padding: 10px; 
    box-sizing: border-box; 
} 

.search-box { 
    position:relative; 
    width:100%; 
} 

.outer_boxs{ 
    position:relative; 
    width:60%; 
} 

.search-wrapper { 
    width: 500px; 
    margin: auto; 
    margin-top: 50px; 
} 

.search-box:focus { 
    box-shadow: 0 0 15px 5px #b0e0ee; 
    border: 2px solid #bebede; 
} 
.close-icon { 
    border:1px solid transparent; 
    background-color: transparent, 
    display: inline-block; 
    vertical-align: middle; 
    outline: 0; 
    cursor: pointer; 
    position: absolute; 
    right:5px; 
    top: 10px; 
    background:#f2f2f2; 
} 

.search-box:not(:valid) ~ .close-icon { 
    display: none; 
} 
</style> 
<div class="search-wrapper"> 
    <form> 
    <div class="outer_boxs" > 
     <input type="text" name="focus" required class="search-box" placeholder="Enter search term" /> 
     <button class="close-icon" type="reset">X</button> 
    </div> 
    </form> 
</div>