Question

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

我设置了背景颜色，颜色和超链接样式，但没有一个影响文本框右侧的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给出了初始显示和可见性设置：

＆＃13;

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');
    }
  })
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

2 个答案: