CSS内容属性不按预期在Firefox中工作

我在做什么是在搜索框中，当用户输入一个搜索词时，我显示一个关闭按钮（'x'字符是具体的，嵌入为内容后重置按钮）到清除搜索框的内容。CSS内容属性不按预期在Firefox中工作

它在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>

来源

2016-09-01 Zai

此代码应帮助您

.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，并根据其设置left你的.close-icon

来源

2016-09-01 09:10:36

试试这个代码：希望这能解决你的问题。调整“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>

来源

2016-09-01 11:56:35 seven

CSS内容属性不按预期在Firefox中工作

回答

相关问题