Go Back  HTML Forums - Free Webmaster Forums and Help Forums > WEBSITE DEVELOPMENT > HTML / XHTML
User Name:
Password:
 

Reply
Thread Tools   Display Modes
  View First Unread
 
Old 07-26-2010, 03:15 AM
  #1
Xeronix
Aspirant (Level 2)
 
Join Date: Jul 2010
Posts: 17
iTrader: (0)
Xeronix is an unknown quantity at this point
How do I create fancy text boxes? Like, really fancy

Hey guys, my first post here.

I'm a normal web developer, and know my stuff pretty well. However, there i sone thing that I don't understand, and that is how to make fancy text boxes.

I really like how Lockerz.com made their text boxes, and want to make mine like that.

The entire rounded rectangle appears to be the box, and the font is large, a sans-serif font, and grey.

How is that even possible?

I looked into using backgrounds in the CSS, but that didn't work.

If anyone knows anything, please post it here haha

Thank you in advanced
Xeronix is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 07-26-2010, 08:47 AM
  #2
lion
Super Guru
 
Join Date: Apr 2005
Posts: 1,865
iTrader: (0)
lion is just really nicelion is just really nicelion is just really nicelion is just really nicelion is just really nice
You're talking about the input fields on that website?

You'll need to do two things. First, you make your background image with rounded corners and then make a div the same size and set the image as its background.

Then, you put your input field inside that div, but style the input field using CSS, specifying that it should have no background, borders, or outlines.

So what you get, is an invisible text-input box sitting directly over your image with rounded corners, which gives you the effect of an input field like the one on that website.

You can then apply other styles to the input field to dictate the size and color of the text.

I've attached a coded example for you to look at.
Attached Files
File Type: zip textbox.zip (4.2 KB, 307 views)
lion is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 07-26-2010, 08:50 AM
  #3
<head>&nbsp;</head>
 
's Avatar
 
Join Date: Jul 2004
Posts: 3,640
iTrader: (1)
 has much to be proud of has much to be proud of has much to be proud of has much to be proud of has much to be proud of has much to be proud of has much to be proud of has much to be proud of
Alternatively, slap your background image on the textarea and use padding to move the contents inside the rounding

__________________
I may have opened the door, but you entered of your own free will
urls removed by choice
 is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 07-26-2010, 08:56 AM
  #4
lion
Super Guru
 
Join Date: Apr 2005
Posts: 1,865
iTrader: (0)
lion is just really nicelion is just really nicelion is just really nicelion is just really nicelion is just really nice
True, but there's a reason I like doing it the other way except now that you make me think about it I completely forgot what the reason is

EDIT: , I just tested it and remembered. Go to this page:

http://www.slashthree.com/v3/

And click on the input field. When you start typing everything is fine, but do you see how the blinking cursor looks when you first click on it? That's what happens if you do it your way.
lion is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 07-26-2010, 09:13 AM
  #5
<head>&nbsp;</head>
 
's Avatar
 
Join Date: Jul 2004
Posts: 3,640
iTrader: (1)
 has much to be proud of has much to be proud of has much to be proud of has much to be proud of has much to be proud of has much to be proud of has much to be proud of has much to be proud of
Assume you mean comment box? I need to register I'll take your word for it

__________________
I may have opened the door, but you entered of your own free will
urls removed by choice
 is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 07-26-2010, 09:18 AM
  #6
lion
Super Guru
 
Join Date: Apr 2005
Posts: 1,865
iTrader: (0)
lion is just really nicelion is just really nicelion is just really nicelion is just really nicelion is just really nice
No, right on the index page. The Username/Password input fields at the top.
lion is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 07-26-2010, 09:23 AM
  #7
<head>&nbsp;</head>
 
's Avatar
 
Join Date: Jul 2004
Posts: 3,640
iTrader: (1)
 has much to be proud of has much to be proud of has much to be proud of has much to be proud of has much to be proud of has much to be proud of has much to be proud of has much to be proud of
In that case "no", cursor is same when I click as it is when I type ... even after enabling js

__________________
I may have opened the door, but you entered of your own free will
urls removed by choice
 is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 07-26-2010, 09:35 AM
  #8
lion
Super Guru
 
Join Date: Apr 2005
Posts: 1,865
iTrader: (0)
lion is just really nicelion is just really nicelion is just really nicelion is just really nicelion is just really nice
Ah, I was afraid of that. Take a look at the attached image to see what I'm talking about, it must be different for you.
Attached Thumbnails
Click image for larger version

Name:	cursor.JPG
Views:	126
Size:	228.5 KB
ID:	11004  
lion is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 07-26-2010, 09:48 AM
  #9
<head>&nbsp;</head>
 
's Avatar
 
Join Date: Jul 2004
Posts: 3,640
iTrader: (1)
 has much to be proud of has much to be proud of has much to be proud of has much to be proud of has much to be proud of has much to be proud of has much to be proud of has much to be proud of
Very different ... makes you wonder why?

__________________
I may have opened the door, but you entered of your own free will
urls removed by choice
 is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 07-26-2010, 11:35 AM
  #10
Xeronix
Aspirant (Level 2)
 
Join Date: Jul 2010
Posts: 17
iTrader: (0)
Xeronix is an unknown quantity at this point
Well, those examples were what I've been trying.

However, the client is looking for a streamline look, without the highlighted box when it is selected.

I know for a fact that it's not flash, after examining the source, however it doesn't click in my head.

When you click on the Lockerz.com text box, it doesn't show any highlighting, and immediately has the grey/large/sans-serif cursor.

The Username and Input boxes are both the same image, white blank images, but I can't figure the text box part out, lol
Xeronix is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 07-26-2010, 11:46 AM
  #11
lion
Super Guru
 
Join Date: Apr 2005
Posts: 1,865
iTrader: (0)
lion is just really nicelion is just really nicelion is just really nicelion is just really nicelion is just really nice
Safari outlines the inside of an input element when you click on it, is that the highlighting that you're talking about? Make sure "outline" is set to "0" for the input element to fix this.

Other than that I don't know what highlighting you're talking about. If you're having an issue with a live page, please post the link to the page or at least the code that you're dealing with, and describe the issue again
lion is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 07-26-2010, 12:40 PM
  #12
Xeronix
Aspirant (Level 2)
 
Join Date: Jul 2010
Posts: 17
iTrader: (0)
Xeronix is an unknown quantity at this point
http://grab.by/5AOF

That's a screenshot of my homepage, however, when I attempt that with something else, like this:

http://grab.by/5AOK

it shows that glowing blue box.

That happens with every text box, except for the Lockerz login box.
Xeronix is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 07-26-2010, 01:30 PM
  #13
lion
Super Guru
 
Join Date: Apr 2005
Posts: 1,865
iTrader: (0)
lion is just really nicelion is just really nicelion is just really nicelion is just really nicelion is just really nice
Setting outline to 0 on the input element should get rid of it for Chrome and Safari. If you've tried and that doesn't work can I see your code for that page please?

In case you don't understand what I'm trying to say, here is an example:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">

input		{

	outline: 0;

}

</style>
</head>
<body>

<form action="send.php" method="post">
<p>
<input type="text" />
</p>
</form>

</body>
</html>
The above code gets rid of the "glowing box" for all input elements on the page.

Comments on this post
Xeronix agrees: This saved my day
lion is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 07-26-2010, 01:50 PM
  #14
Xeronix
Aspirant (Level 2)
 
Join Date: Jul 2010
Posts: 17
iTrader: (0)
Xeronix is an unknown quantity at this point
xfox, You are my hero!

Thank you for saving the day for me!!
Xeronix is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 07-26-2010, 01:51 PM
  #15
lion
Super Guru
 
Join Date: Apr 2005
Posts: 1,865
iTrader: (0)
lion is just really nicelion is just really nicelion is just really nicelion is just really nicelion is just really nice
Glad we sorted that out, you're welcome
lion is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Reply
KEEP TABS
SPONSORS
 
Boxedart

 
 


 
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
  
 
 
 



 
  POSTING RULES
 
 
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Thread Tools
Display Modes

Forum Jump

 

All times are GMT -5. The time now is 05:45 PM.

   

Mascot team created by Drawshop.com | Web Hosting

Powered by vBulletin® Version 3.6.7
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.

Server Monitoring by ENIACmonitor 0.01
HTMLforums.com © Big Resources, Inc. Web Design by BoxedArt.com
vRewrite 1.5 beta SEOed URLs completed by Tech Help Forum and Chalo Na.