0

I would like to change watermark text and pup-up text on my search bar. I would like to do it with some CCS. I know that it not recommended but I think that this is the fastest way.

I have readen How can I replace text with CSS? and How to use CSS to replace or change text? but my case is more complicated.

I tried:

input.search-field.placeholdit.watermark span{
 display:none !important;
}

input.search-field.placeholdit.watermark:after{
 content: 'TEXT'!important;   
}

And some other combinations with span.screen-reader-text, search-wrapper, search-field.placeholdit. The only thing which I achived was earasing searchbox window.

Search box looks like on image bellow - I would like to change "Search ..." and "Search for:" texts:

Search bar

Search box code:

 <div class="search-wrapper">
        <form role="search" method="get" class="search-form" action="my.website.com">
            <label>
                <span class="screen-reader-text">Search for:</span>
                <input type="search" class="search-field placeholdit" value name="s" title="Search for:">
            </label>
            <input type="submit" class="search-submit" value="Search">
        </form>
 </div>

If there are better ways to change it, I would like to hear it. Beginnings are rough but I would like to learn how to change webpages properly.

Community
  • 1
  • 1
ppi0trek
  • 117
  • 1
  • 1
  • 11

1 Answers1

0

Don't use CSS for this. Just change the "placeholder" and "title" attributes in your HTML:

<input type="search" class="search-field" value="" name="s" placeholder="Search" title="Search for:">

You should fix your "value" attribute too.

shipshape
  • 1,682
  • 2
  • 17
  • 33
  • [The HTML5 placeholder attribute is not a substitute for the label element](http://www.456bereastreet.com/archive/201204/the_html5_placeholder_attribute_is_not_a_substitute_for_the_label_element/) – Quentin Jan 22 '17 at 19:57
  • Thanks @shipshape. I am useing tesseract theme. I didn't make this web from skratch. Any idea where can I find this lines in whole theme package? I tried header and styles but there are only some references. Is there a common file to store this information? I took code from inspect page function on my browser. – ppi0trek Jan 22 '17 at 20:33