Solved

input textbox with shadow

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

910 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

19 Experts available now in Live!

Get 1:1 Help Now