我犯了一个简单的错误,将我的 #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/
提前致谢!我假设修复很简单。
最佳答案
.tsbutton
- 这是您的搜索按钮
目前它的文本设置为黑色
.tsbutton {
...
color: #000;
}
把它改成白色
.tsbutton {
...
color: #FFF;
}
要更改悬停时的颜色,您可以这样做
.tsbutton:hover {
...
color: yellow;
}
关于html - 如何更改搜索按钮文本颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32854088/