How to change colour of -webkit-appearance -moz-window-button-close - html

Question

Screenshot of the issue
How do you change colour of -webkit-appearance -moz-window-button-close? As you can see in the image at the moment it's blue and I want to be able to change the colour to the brown that the rest of the textbox uses.
I've set the background-color, color and hyperlink styles but none of it affected the X icon in the right of the text box.
I've searched around a lot but I haven't found a solution, maybe I'm just not using the right keywords.
Any help is very much appreciated.

Answer 1

You could try: Add-webkit-appearance: none; to input[type=search]::-webkit-search-cancel-button and style using an image. Please refer to CodePen for an example - Codepen image

Answer 2

Okay, so it took me a long time to figure this out. Essentially there is only a single resource that I found which would allow this to work. However, the author states that fewer and fewer browsers are supporting it.
Lesson to be learned - Don't bother using WebKit for trying to add icons inside. Just build it up yourself with HTML, CSS, and jQuery (or alternatives).
I took a different approach which, although involves jQuery, seems to work fine. I built up a span to give the same appearance, used jQuery to control the visibility and display properties, font-awesome for the search icon and CSS gave the initial display and visibility settings:
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">✖</a></span> <i id="searchIcon" class="fa fa-search fa-lg brownBorder" aria-hidden="true"></i></h1>
</div>
</div>
</div>