如何改變顏色-webkit-外觀-moz-窗口按鈕關閉

Question

Screenshot of the issue

你如何改變-webkit-外觀-moz-窗口按鈕關閉的顏色？正如您在圖片中看到的那樣，它是藍色的，我希望能夠將顏色更改爲文本框其餘部分使用的棕色。

我已經設置了背景顏色，顏色和超鏈接樣式，但沒有一個影響文本框右側的X圖標。

我搜遍了很多，但我還沒有找到解決方案，也許我只是沒有使用正確的關鍵字。

任何幫助，非常感謝。

Answer 1

你可以嘗試：使用圖像添加-webkit-appearance: none;到input[type=search]::-webkit-search-cancel-button和樣式。請參考codepen的例子 - Codepen image

Answer 2

好吧，所以我花了很長時間才弄清楚，基本上只有一個資源，我發現這將允許這個工作，但是，作者聲明越來越少的瀏覽器支持它。

需要學習的課 - 不要打擾使用webkit來嘗試添加圖標，只需使用HTML，CSS和JQuery（或其他選項）自己構建圖標即可。

我採取了一種不同的方法，雖然涉及JQuery似乎工作正常，我建立了一個跨度給予相同的外觀，使用JQuery來控制可見性和顯示屬性，字體真棒的搜索圖標和CSS給了初始顯示和可見性設置：

function searchIconClicked() { 
 
    if ($("#searchBorderbox").css('display') == "none") { 
 
    $("#searchIcon").css("visibility", "hidden"); 
 
    $("#searchBorderbox").css("display", "inline"); 
 
    $('#searchBorderbox').css("visibility", "visible"); 
 
    $('#searchBorderbox').animate({ 
 
     "width": 440 
 
    }); 
 
    $('#searchBorderbox').promise().done(function() { 
 
     $('#clearSearchTextboxIcon').css('display', 'inline'); 
 
     $("#searchIcon").css("visibility", "visible"); 
 
    }); 
 
    } 
 
} 
 

 
function clearSearchTextbox() { 
 
    $("#searchTextbox").val(''); 
 
} 
 

 
$(document).ready(function() { 
 
    $("#searchIcon").on('click', searchIconClicked) 
 
    $("#clearSearchTextboxIcon").on('click', clearSearchTextbox) 
 

 
    $('#searchTextbox').keyup(function() { 
 
    if ($(this).val().length != 0) { 
 
     $('#clearSearchTextboxIcon').css('visibility', 'visible'); 
 
    } else { 
 
     $('#clearSearchTextboxIcon').css('visibility', 'hidden'); 
 
    } 
 
    }) 
 
});

body { 
 
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    font-size: 15px; 
 
    line-height: 1.42857143; 
 
    background-color: #023930; 
 
} 
 

 
#quoteBox { 
 
    margin-top: 45%; 
 
    margin-bottom: 45%; 
 
} 
 

 
#quoteBoxText { 
 
    text-align: center; 
 
    padding-top: 1%; 
 
    padding-bottom: 1%; 
 
    max-width: 100%; 
 
} 
 

 
.brownBorder { 
 
    color: #855F1C !important; 
 
} 
 

 
.searchSpanBox { 
 
    display: none; 
 
    width: 0%; 
 
    border-radius: 25px; 
 
    border: 5px solid #855F1C !important; 
 
    background-color: #023930; 
 
    border-spacing: 25px; 
 
    box-sizing: border-box; 
 
} 
 

 
.searchTextbox { 
 
    background-color: #023930; 
 
    width: 0%; 
 
    padding-left: 10px; 
 
    width: 380px; 
 
    border: 0; 
 
    color: #FFFFFF; 
 
    border-radius: 25px; 
 
    outline: none; 
 
} 
 

 
#clearSearchTextboxIcon { 
 
    display: none; 
 
    visibility: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="main col-xs-12" id="quoteBox"> 
 
    <div id="quoteBoxText"> 
 
     <h1><span id="searchBorderbox" class="brownBorder searchSpanBox"><input type="search" id="searchTextbox" class="searchTextbox"><a id="clearSearchTextboxIcon">&#10006;</a></span> <i id="searchIcon" class="fa fa-search fa-lg brownBorder" aria-hidden="true"></i></h1> 
 
    </div> 
 
    </div> 
 
</div>