Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    116
    Thanks
    29
    Thanked 1 Time in 1 Post

    [CSS] styling a search box

    HI all

    1. I have an image as a submit button. Is it posible to change it to only text styled with css, as its only text, i dont see the need of an image for this.

    2. Is it posible to change the SearchBoxMain border ( border: 2px solid #CCCCCC; ) to another color when the user is typing on the search box?

    The idea is to have something like the bing search box www.bing.com

    preview image:

    THanks in advance

    HTML code:
    Code:
         <div id="SearchBoxMain">
          <form method="POST" action="search.php">
            <input type="text" name="keyword" size="38" id="s" />
            <input type="hidden" name="type" value="audio" />
            &nbsp;&nbsp;&nbsp;
            <input type="image" src="images/search.gif" value="Search" name="B2" id="go"/>
          </form>
         </div>
    Respective CSS:
    Code:
    #SearchBoxMain {
    	float: left;
    	width: 350px;
    	height: 28px;
    	margin-left: 20px;
    	border: 2px solid #CCCCCC;
    }
    #s {
    	float: left;
    	height: 21px;
    	border: none;
    	margin: 3px;
    }
    #go {
    	margin: 8px 4px 0 0;
    	float: right;
    }
    Last edited by hernantz; 01-28-2010 at 07:10 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello hernantz,
    Did you try removing the image?
    Code:
     <form method="POST" action="search.php">
            <input name="keyword" size="38" id="s" type="text">
            <input name="type" value="audio" type="hidden">
            &nbsp;&nbsp;&nbsp;
            <input value="Search" name="B2" id="go" type="image">
          </form>       
         </div>
    Not sure about your second issue...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Posts
    116
    Thanks
    29
    Thanked 1 Time in 1 Post
    Thanks for answering.
    That woks if i dont link this to an image. I could leave like that but...how to do it well? i mean, what input tag should i use?
    PHP Code:
    <input type="image" value="Search" name="B2" id="go" /> 
    The text decoration did not applied, dont know why
    Code:
    #go {
    	align: right;
    	text-decoration: bold 15px #CCCCCC;
    }
    About my second issue, maybe with a :focus on searchboxmain, what do you think?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    1. I have an image as a submit button. Is it posible to change it to only text styled with css, as its only text, i dont see the need of an image for this.

    2. Is it posible to change the SearchBoxMain border ( border: 2px solid #CCCCCC; ) to another color when the user is typing on the search box?

    The idea is to have something like the bing search box www.bing.com
    You could use firebug in FF to inspect their page and learn the trick!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Jan 2010
    Posts
    35
    Thanks
    0
    Thanked 1 Time in 1 Post
    use a then add javascript function to submit the form
    bright your site -i'm a freelancer ready to work for you!!!

  • #6
    Regular Coder
    Join Date
    Mar 2009
    Posts
    116
    Thanks
    29
    Thanked 1 Time in 1 Post
    Quote Originally Posted by abduraooft View Post
    You could use firebug in FF to inspect their page and learn the trick!
    THanks for the tip

    ok i finally used a button tag for this, and is working perfect. Now, to change the border of the SearchBoxMain div while typing in the search box ill see if i can use an html event like onfocus

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Now, to change the border of the SearchBoxMain div while typing in the search box ill see if i can use an html event like onfocus
    Code:
    #s:focus{
    /* all new style goes here*/
    }
    (Not supported by IE6 though)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,629
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    Quote Originally Posted by brightyoursite View Post
    use a then add javascript function to submit the form
    And what happens if JS isn’t available/supported? (and yes, there are such cases!)

  • #9
    Regular Coder
    Join Date
    Mar 2009
    Posts
    116
    Thanks
    29
    Thanked 1 Time in 1 Post
    Quote Originally Posted by abduraooft View Post
    Code:
    #s:focus{
    /* all new style goes here*/
    }
    (Not supported by IE6 though)
    ok but i wanted the SearchBoxMain div to change, i think ist only posible with js, dont know with html5

    Quote Originally Posted by VIPStephan View Post
    And what happens if JS isn’t available/supported? (and yes, there are such cases!)
    Yeah, im trying to prioritize html + css, is it possible to make a dinamic site without js?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •