如何更改搜索按钮文本颜色？答案

【问题标题】：how to change search button text color?如何更改搜索按钮文本颜色？
【发布时间】：2015-09-30 05:43:27
【问题描述】：

我犯了一个简单的错误，将我的 #000 标签更改为 #FFF 标签，因为它最初不起作用，因此将它们更改回 #FFF 可以满足我的需求，减少我选择 #deb900 的悬停为了！问题得到解答！原始问题如下，您可以看到我犯的简单错误：

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

我想我还应该提到这是一个用 wordpress 制作的网站。从我一直在检查的内容来看，引导 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/

提前感谢您！我假设修复很简单。

【问题讨论】：

标签： html wordpress css

【解决方案1】：

.tsbutton - 这是您的搜索按钮

目前它的文本设置为黑色

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

改成白色

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

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

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

【讨论】：

【解决方案2】：

您可以在 .tsbutton 的 CSS 中将 color: #000 更改为 color: <whatever color value you want>。

给予：

.tsbutton {
    /* other properties unchanged */
    color: #fff;
}

Updated JS Fiddle demo.

【讨论】：

我认为 OP 认为 #000 是白色的
@JuanMendes 你说得对，我原来是#FFF，但当它不起作用时，我把它改回#000。
@JuanMendes 起初它对我不起作用，因为 Wordpress 的引导 css 文件中的某些内容会覆盖我放入 css 文件中的任何内容。

【解决方案3】：

在您的 CSS 中，您将 .tsbutton 的颜色设置为 #000（黑色）。将其更改为#FFF（白色）

color: #FFF;

或

color: white;

要获得金色悬停效果，请在 .tsbutton 上使用悬停选择器

.tsbutton:hover {
    color: gold;
}

【讨论】：