html - how to change search button text color? -
i made simple error of changing #000 tags #fff tags when wasn't working originally, changing them #fff works want, minues hovering chose #deb900 for! question answered! original question below , can see simple error made:
i'm trying change color of text in search bar i'm creating website. want change color of text white, , have change golden yellow color when hover on button. i've tried placing color tag in multiple places within css code file, nothing working. i've used chrome's "inspect element" tool make sure nothing overiding code. !important
option doesn't seem work either :(.
i guess should mention website made in wordpress. i've been checking, nothing in bootstrap css code or default css file messing part of code. i've tried check every source possible before posting.
here 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 put on jsfiddle yall:
http://jsfiddle.net/trcrum/of7ex9sj/
thank in advance! i'm assuming fix simple.
.tsbutton
- search button
it has it's text set black
.tsbutton { ... color: #000; }
change white
.tsbutton { ... color: #fff; }
to change colour on hover this
.tsbutton:hover { ... color: yellow; }
Comments
Post a Comment