Graphic Design shadow to enhance presentation of images.
Graphic Design shadow to enhance presentation of images.

Web Design - Tips, Tricks and Programmng

Giving a SELECT Statement a Background

Return to Forum Home Page

Forum

Return to Topic

Return to Topic

Login to Forum

Login to Forum

Register to access Forum

Register to access Forum

Previous Thread Return to Topic Next Thread
Author Message

17 Designs

17 Designs

Date Joined:
Jan 19, 2010

Posts:
66

Posted: Wed Sep 7, 2011 11:55 AM

Subject: Giving a SELECT Statement a Background

Ordinarily, a SELECT statement has a white background and is surrounded on all 4 sides by a border.

SELECT statements can be enhanced like any web element using CSS.

Below is an example of taking an ordinary SELECT statement and adding an image behind it.

First, define a CSS style that will add an image to the background and ensure your SELECT statement references the style you created.

The style can be created on the fly using the following command,

<style type="text/css">
/* Enter style here */
</style>

Or, it can be included as part of a CSS file.
.pick-category {
width: 205px;
font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
font-size: 11px;
line-height: 13px;
color: #046330;
text-decoration: none;
font-weight: normal;
margin: 0 0 0 0;
padding: 0 0 0 0;
border: 1px solid #106333;
background: url(../images/blog/input-select.jpg) no-repeat left 0px;
padding-left: 4px;
}
</style>

In your HTML file, define the SELECT statement and make sure it references the style you just created. NB: class=pick-category

<select class="pick-category" name="category_id" size="6">
<option value="XX">Select from list</option>
<option value="1">Go Out To Dinnner</option>
<option value="2">Got Out To Movies</option>
<option value="3">Eating In</option>
<option value="4">Visiting Friends</option>
<option value="5">Visting In-Laws</option>
</select>

Return to Forum Home Page

Forum

Return to Topic

Return to Topic

Login to Forum

Login to Forum

Register to access Forum

Register to access Forum