Solved

input textbox with shadow

Posted on 2010-09-09
3
1,157 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

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

822 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