Question

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

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

我想我还应该提到这是一个用wordpress制作的网站。从我所检查的内容来看，bootstrap css代码或其默认css文件中的任何内容都没有弄乱我的代码部分。在发布之前，我试图检查每个可能的来源。

这就是我所拥有的：

＆＃13;

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

＆＃13;

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

＆＃13;

我也把它放在jsfiddle for yall：

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

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

Answer 1

.tsbutton - 这是您的搜索按钮

目前它的文字设置为黑色

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

将其更改为白色

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

要在悬停时更改颜色，您可以执行此操作

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

Answer 2

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

给予：

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

Updated JS Fiddle demo

Answer 3

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

color: #FFF;

OR

color: white;

要获得金色悬停效果，请在.tsbutton

上使用悬停选择器

.tsbutton:hover {
    color: gold;
}

如何更改搜索按钮文字颜色？

3 个答案: