0

Perhaps this is a noobish questions but, I am learning EE so here goes.

This is the code I have for my search box on my website.

{exp:search:simple_form channel="video_tutorials"}
        <p>
               <label for="keywords">Search:</label>
             <input type="text" name="keywords" id="keywords" value="" size="18" maxlength="100">
         </p>
    {/exp:search:simple_form}

I am wondering, is there a way I can change this appearance on my website. For instance I would like to display the word "search" inside of the input area where a user would enter their search text. I would also like to make the white box longer. Can someone point me in the right direction? Thank you so much!

4

This is quite simple, and why I prefer EE over other systems. It easily allows you to customize your markup anyway you want to. The {exp:search:simple_form} tag has two parameters to let you target and style the form with CSS (Docs). form_id & form_css.

Re: placeholder text for the input, you can add the placeholder HTML5 attribute to the form. If you want to support older browsers, you will need to do this with JS.

{exp:search:simple_form form_id="my_form" channel="video_tutorials"}
        <p>
               <label for="keywords">Search:</label>
             <input type="text" name="keywords" id="keywords" value="" size="18" maxlength="100" placeholder="Search...">
         </p>
{/exp:search:simple_form}
6
  • Here is my code now: {exp:search:simple_form form_class="searchbox" channel="video_tutorials"} <p> <label for="keywords">Search:</label> <input type="text" name="keywords" placeholder="Search" id="keywords" value="" size="18" maxlength="100"> </p> {/exp:search:simple_form}. My CSS looks like .searchbox { height: 10px; width: 150px; border: 1px solid black; background-color: blue; text-align:left; }. Am I wrong on creating "searchbox"? Jan 14 '13 at 20:29
  • Adding the form_class parameter adds a class to the form itself. Therefore in your css, .searchbox is targeting the <form>. To target the keywords input field itself you should add a class to the tag or use .searchbox input[type=text] or just #keywords. Jan 14 '13 at 20:45
  • if I use .searchbox, would I simply just replace form_class"searchbox" with it? or would I need to make a div within the simple form tags? My end goal is to make the text input area a larger box. Jan 14 '13 at 20:59
  • 1
    Leave the form_class="searchbox" as is, and like Jason said, target the input with .searchbox input[type="text"] or use the ID of the input #keywords in your stylesheet
    – Siebird
    Jan 14 '13 at 21:05
  • 1
    I have the #keywords working, so I can go in a tweak it now to how I want it. Thank you both so much for your help, I really appreciate it :) Jan 14 '13 at 21:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.