html - 如何更改搜索按钮文本颜色？

Question

我犯了一个简单的错误，将我的 #000 标签更改为 #FFF 标签，但它最初无法正常工作，因此将它们改回 #FFF 可以满足我的需要，减少我选择的悬停 #deb900为了!问题得到解答!原始问题如下，您可以看到我犯的简单错误:

我正在尝试更改为我的网站创建的搜索栏中的文本颜色。我想要做的就是将文本的颜色更改为白色，并在将鼠标悬停在按钮上时将其更改为金黄色。我试过将颜色标签放在我的 css 代码文件中的多个位置，但没有任何效果。我使用 Chrome 的“检查元素”工具来确保没有任何东西覆盖我的代码。 !important 选项似乎也不起作用 :(。

我想我还应该提到这是一个用 wordpress 制作的网站。从我一直在检查的内容来看，bootstrap css 代码或它们的默认 css 文件中没有任何内容会干扰我的这部分代码。在发布之前，我已尝试检查所有可能的来源。

这是我的:

#tsheader {
  background-color: transparent;
}
#tsnewsearch {
  float: right;
  height: 30px;
}
.tstextinput {
  margin: 0 auto;
  height: 22px;
  padding: 0px 25px;
  border: 1px solid #bf2f2a;
  border-right: 0px;
  border-top-left-radius: 5px 5px;
  border-bottom-left-radius: 5px 5px;
}
.tsbutton {
  margin: 10px 0;
  padding: 0px 10px !important;
  height: 22px;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  border: solid 1px #bf2f2a;
  border-right: 0px;
  background: #bf2f2a;
  background: -webkit-gradient(linear, left top, left bottom, from(#bf2f2a), to(#862724));
  background: -moz-linear-gradient(top, #bf2f2a, #862724);
  border-top-right-radius: 5px 5px;
  border-bottom-right-radius: 5px 5px;
  color: #000;
}
.tsbutton input,
button {
  font-size: 13px;
  font-weight: 700px;
  color: #000 !important;
}
.tsbutton:hover {
  background: #bf2f2a;
  background: -webkit-gradient(linear, left top, left bottom, from(#E03630), to(#bf2f2a));
  background: -moz-linear-gradient(top, #E03630, #bf2f2a);
}
.tsbutton::-moz-focus-inner {
  border: 0;
}
.tsclear {
  clear: both;
}

<div id="tsheader">
  <form id="tsnewsearch" method="get" action="http://isupark.dev/">	<i class="fa fa-search" style="position: absolute; left: 5px; top:8px; overflow: visibile;"></i>
    <input type="text" class="tstextinput" placeholder=". . ." name="s" maxlength="120">
    <input type="submit" value="Search" class="tsbutton">
  </form>
  <div class="tsclear"></div>
</div>

我也把它放在 jsfiddle 上供大家使用:

http://jsfiddle.net/trcrum/of7ex9sj/

提前致谢!我假设修复很简单。

Answer 1

.tsbutton - 这是您的搜索按钮

目前它的文本设置为黑色

.tsbutton {
    ...
    color: #000;
}

把它改成白色

.tsbutton {
    ...
    color: #FFF;
}

要更改悬停时的颜色，您可以这样做

.tsbutton:hover {
    ...
    color: yellow;
}