Solved

input textbox with shadow

Posted on 2010-09-09
3
1,152 Views
Last Modified: 2012-05-10
textbox with a shadow
like
http://roomorama.com/
has


how is this done
0
Comment
Question by:rgb192
3 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33641535
0
 
LVL 3

Accepted Solution

by:
Maverick-lm earned 500 total points
ID: 33641821
They're doing it through the magic of an image file (http://roomorama.com/images/input-field.png?1266446897) as a positioned background image.

Basically you want a class on the <input> tag that sets the background style to the image, and then a combination of setting border to none, and set widths, heights, line-heights and padding as appropriate.

They're using a single png image file with multiple examples of shadowed borders and using the background-position style to determine which section of the png image to use depending on the various field widths they want to use. Obviously you can simply use a single image and leave it position at 0 0.

Have a look at the source using the Firebug extension in Firefox, Developer Tools in IE8 or Chrome, that will help you a lot.

For example, the top most input for "City" mainly uses this css (I removed some of the surplus classes for clarity):

input.fixed.large {
background-position:left -112px;
width:170px;
}

input.fixed {
background:url("/images/input-field.png?1266446897") repeat scroll 0 0 transparent;
border:medium none;
font-size:11px;
height:16px;
line-height:20px;
padding:5px 7px 7px 5px;
width:120px;
}

The input has class="fixed large toggleval acInput", where "fixed" and "large" apply the above css.

Open in new window

0
 

Author Closing Comment

by:rgb192
ID: 33657594
thanks
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now