how to change search button text color?

1 Views

I made a simple error of changing my #000 tags to #FFF tags when it wasn’t working originally, so changing them back to #FFF works for what I want, minues the hovering which I chose #deb900 for! Question is answered! The original question is below and you can see the simple error I made:

I’m trying to change the color of text in the search bar I’m creating for my website. All I want to do is change the color of the text to white, and also have it change to a golden yellow color when you hover over the button. I’ve tried placing the color tag in multiple places within my css code file, but nothing is working. I’ve used Chrome’s “inspect element” tool to make sure that nothing is overiding my code. The !important option doesn’t seem to work either :(.

Read More

I guess I should also mention that this for a website made in wordpress. From what I’ve been checking, nothing in the bootstrap css code or their default css file is messing with this part of my code. I’ve tried to check every source possible before posting.

Here is what I have: 

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

I also put it on jsfiddle for yall:

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

Thank you in advance! I’m assuming that the fix is something simple.

Post Views: 1

Related posts

3 comments

  1. .tsbutton – this is your search button

    It currently has it’s text set to black

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

    Change it to white

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

    To change the colour on hover you would do this

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

  2. You can change color: #000 to color: <whatever color value you want> in your CSS for .tsbutton.

    To give:

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

    Updated JS Fiddle demo.

  3. In your CSS, you have the color for .tsbutton set to #000 (black). Change that to #FFF (white)

    color: #FFF;

    OR

    color: white;

    To get the golden hover effect, use a hover selector on .tsbutton

    .tsbutton:hover {
    color: gold;
}

Comments are closed.