The site for Irrational Games is made with WordPress. My site is made with WordPress. So, here is my question: they have a little pointy hand thing for the search button. How do I take that image off of their website and incorporate it into my own? Or, well, I guess I can just use a similar image. My question is, how do I make my “search” button into an image? Also, if you notice, on Irrational Games’ website, the search bar is simply a box with a one pixel line around it, with the hand nice and snug against the right side. They also have the word “Search” in the field box, which goes away when you try to type something. If someone can explain to me how to do all of that, it would be greatly appreciated. If you would like to visit my own site to test something in Firebug, go here. Thank you!
It’s just some basic css with HTML5 (demo)
This is the HTML
the “placeholder” is an HTML5 attribute that adds the text inside of the input when it is empty.
And the css basically replaces the default button style with the image and positions the button
top: -5px; /* line up hand with input */
background: url(http://irrationalgames.com/wp-content/themes/irrational/img/hand.png) left top;
background-position: left bottom;
One last note, if you use this code, please save a copy of the image to your own server. No one likes hot linking – I hope the demo I made here doesn’t matter ;)
(edit: written while @mottie was also writing…sorry!)
To make your button look like an image, just style it with CSS. Something like this:
Use some additional styling, a local image (don’t use one on an external server), some
:hover effects, and you should be on your way.
Thank you, to the both of you! I just have one, little question left. Where do I add the HTML5?
This is what it looks like for my “searchform.php” file:
Edit: Also, I just tried the HTML5, and it does not seem to be working. You can see on my website, here.
@Mottie: Okay, I got the “placeholder” to work and apparently I had to do the whole trail of breadcrumbs back to my “images” folder in my CSS to get the hand to work. But there is one little thing still wrong: the word “Search” appears in black over the hand. How do I get rid of that pesky, little sucker? Thank you for all the help you have given me! I am glad I grabbed the hand image while I could. It seems that the hotlink from your code to Irrational’s website is now blocked. Haha! Oops. Apparently, they did mind.
@mikes02: Yeah, I know. It sucks that not all browsers will be able to see it, because I enjoy the small details in a website. C’est la vie, I guess.
Edit: Oh, and is there a way to change the color of the word “Search” in the “placeholder.” I was picturing more of a dark grey instead of pure black. Thanks, again!
Edit: Okay, I figured it out. I leave “value” blank. At first, I got rid of “value” all together and then it replaced “Search” with “Submit”. Haha! But I would still like to know how to change the color of “placeholder.”
Edit: Gasp! I actually looked something up on the internet and found a decent answer. I now know how to change the color of “placeholder.” Thank you, everyone!
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".