- This topic is empty.
December 26, 2011 at 9:05 pm #35842
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!December 26, 2011 at 9:16 pm #93408
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 ;)December 26, 2011 at 9:38 pm #93411
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.December 26, 2011 at 10:38 pm #93412
It looks like you’re using the correct doctype, so all you need to do is to modify this input
Also, in HTML5, inputs do not need a closing slash at the end “/”.December 26, 2011 at 10:39 pm #93413mikes02Participant
It is also important to note that placeholder is not supported in all browsers, it is still safe to use on projects, just know that not all browsers will render the placeholder value.December 26, 2011 at 11:08 pm #93414
@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!December 27, 2011 at 12:01 am #93415mikes02Participant
You could use something like this jQuery Placeholder Support just know you are relying on a JS method.December 27, 2011 at 11:32 am #93443
- The forum ‘CSS’ is closed to new topics and replies.