How to Set the Background Image for a Search Button in CSS
Cascading Style Sheet (CSS) code gives web designers fine-tune control over a website's look and feel. Due to the way every browser and computer uses a different style search button as its default, web designers should look at ways to set their own style rules for them. The best way to style a search button is to set a custom background and edit the style of its text.
Other People Are Reading
Instructions
-
-
1
Open up the file containing the code for your website's search button. In most cases, the button is written as an <input> tag with the "type" attribute set to "submit" like so: <input type="submit" />. This tag likely also contains other attributes when it is used for submitting a search term, but the important thing is to identify the button in the code.
-
2
Look for the search button's ID attribute. Add an ID, if the button's <input> tag does not yet have one. An example of button code with an ID is: <input type="submit" id="the-id-name" />. You will target this tag and ID in the CSS code.
-
-
3
Open your Website's CSS file if one already exists, or add <style> and </style> tags between the HTML file's <head> and </head> tags. Begin the CSS rule by targeting your button like so: input #the-id-name {}.
-
4
Between the curly braces in your CSS code, type the following: background: URL(path-to-your-background.png); The path to the graphic file you want to use as a background goes between the parentheses after "URL." Your final code should look like this: input #the-id-name {background: URL(path-to-your-background.png);}
-
5
Add the style rule "border: 0;" to your CSS code. This rule, like every other CSS rule, goes between the curly braces. By default, browsers set borders around buttons, and these borders look ugly when a background is set. You can also set a border different from the default, such as "border: 1px solid #cccccc" for a one-pixel wide, solid, light gray border.
-
6
Change the font style for the button by adding CSS style rules for color, font-family or font-size. Color effects the font color. The options are limitless: use any CSS style rule to change the look of the button. For a button with a blue background, you could set bold, white text for the button like so: input #the-id-name {background: URL(path-to-your-background.png); color: #fff; font-weight: bold;}
-
7
Save your files and then open the web page in a browser. Upload the files to a server first, if they contain any server-side code like PHP or ASP. Check in the browser that the background shows on your button.
-
1
Tips & Warnings
Keep a CSS code chart handy, either by loading it in a tab in your browser or by printing it out and posting it on your wall. Edit HTML and CSS files in either a plain-text or code editor.
- Photo Credit Jack Hollingsworth/Photodisc/Getty Images
