Input type='text" Style

[saw15]

I am trying to re-create the following style of the input for email and passoword (the shading of the input type):


example found here, look at the email and password input types:

http://www.netronline.com/datastore/

If anyone is familiar with how to do this I would appreicate it.

Thanks in advance.

 

[BabyJeffy]

Copied from their site, here is the CSS:

<style type="text/css">
.Input_Textbox_Login_Email {
	font-family:Arial,Helvetica,sans-serif;
	font-size:11px;
	border: 1px solid #000000;
	color: #000000;		        
	width: 95px; 
	background-position: left top;
	background-image: url('[URL unfurl="true"]http://www.netronline.com/datastore/images/input-box-shadow.gif');[/URL]
	background-repeat: no-repeat
}
</style>

And this is how you would apply it in HTML:

<input type="text" class="Input_Textbox_Login_Email" name="email"/>

By the way, I tested this on Safari and IE5.2 (both on MacOSX) and they did not show the shadow... only Firefox (on MacOSX) showed the shadow effect. I would imagine there are browsers in Windows with similar results.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[saw15]

Thanks Jeff.

I figured it was a background image, but didn't see anything in the css to indicate as much.

Do you do something special to see the image ?

 

[Vragabond]

Hmmmm, how about looking at the source of the page? To me it revealed this:

.Input_Textbox_Login_Email {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  border: 1px solid #000000;
  color: #000000;		        
  width: 95px; 
  background: url('[URL unfurl="true"]http://www.netronline.com/datastore/images/input-box-shadow.gif')[/URL] top left no-repeat;
}

.Input_Textbox_Login_Password {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  border: 1px solid #000000;
  color: #000000;		        
  width: 70px;
  background: url('[URL unfurl="true"]http://www.netronline.com/datastore/images/input-box-shadow.gif')[/URL] top left no-repeat;
}

 

[Vragabond]

Wow, slow.

You just add the image as a background. Know though that not all browsers on all OSes support custom backgrounds on form elements. See

http://www.456bereastreet.com/lab/form_controls/text_input/

for more details.

 

[saw15]

Got it, thanks again.

 

[vacunita]

Without actually seeing the CSS code, i can only guess that the shading is an image applied as a background to the textbox using CSS.

it might look something like:

.textbox_style {
	font-family: "MS Sans Serif", "Microsoft Sans Serif", Impact;
	font-size: 9px;
	background-image: url(shade.png);
	border: thin solid #000000;
}

Hope this helps

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.