如何更改-webkit-appearance -moz-window-button-close 的颜色

Question

Screenshot of the issue

如何更改-webkit-appearance -moz-window-button-close 的颜色？正如您目前在图像中看到的那样，它是蓝色的，我希望能够将颜色更改为文本框其余部分使用的棕色。

我已经设置了背景颜色、颜色和超链接样式，但是 none 它影响了文本框右侧的 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>

如何更改-webkit-appearance -moz-window-button-close 的颜色

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

html

css

webkit

webkit-appearance