[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

rounded-corner textbox with html / css

Posted on 2007-07-19
12
Medium Priority
?
16,148 Views
Last Modified: 2013-11-19
How can i create a rounded-corner textbox in html (or css) ??
0
Comment
Question by:axtur
  • 5
  • 4
  • 2
  • +1
12 Comments
 
LVL 30

Expert Comment

by:VirusMinus
ID: 19527561
you can't
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 19527592
atleast not cross browser.. yet.

mozilla has some limited support.

eg.

CSS:

#rounded-textbox {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background-color:#DDDDDD;
border:1px solid #7E94A6;
padding-left:2px;
padding-right:2px;
width:15em;
}


HTML:

<input size="20" name="roundedTextbox" title="Enter some text" id="rounded-textbox"/>
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 19527611
Here's another way someone has done it. but IMO its not worth the hassle:

http://www.webxpert.ro/andrei/2005/12/20/rounded-border-textbox/

basically they made an image with the rounded textbox drawn and used it as a background. then then put real textboxes without any borders and lined them up to fall inside the drawn textboxes in the image background.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 12

Expert Comment

by:jessegivy
ID: 19527930
Woh, why not remove the border and use a background-image in the input itself?  Then you'll have to adjust the text placement so it looks right...
0
 
LVL 12

Accepted Solution

by:
jessegivy earned 1500 total points
ID: 19527970
...of course I suppose this is technically a CSS solution for the HTML TA but hey, they've completely stripped the HTML spec so we've got nothing but cross-over.  Here ya go:

<html>
      <head><title>Rounded Input</title></head>
      <body>
            <input type="text" style="background-image:url('images/rounded.gif');border:0px solid;" />
      </body>
</html>

...of course you'll probly want a slightly more complex page with forms and such but I'm sure you get the gist.  rounded.gif should be an image of exactly what you want your textbox to look like :)   and of course that's a completely different question for a different TA.

Cheers,

Jesse
0
 
LVL 9

Expert Comment

by:sundaramkumar
ID: 19529221
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 19529264
sundaramkumar, the asker is asking about textboxes. i.e. form fields. not just divs.

jessegivy, the background image may seem to work in certain browsers but form fields and default behavior is very different across browsers and operating systems and css applied also varies greatly in rendered appearance.
0
 
LVL 12

Expert Comment

by:jessegivy
ID: 19537288
...can I just say that's what I HATE about CSS.  Or maybe it's browser software that's the real problem!  Another solution that could work would be to use opacity and just layer an image of the text box (visually the way you want it to look) over the top of the text area...

http://www.quirksmode.org/dom/inputfile.html

PERFECT!  I knew I had the solution in my head somewhere!

What do you say Mr. Minus any props?
0
 
LVL 12

Expert Comment

by:jessegivy
ID: 19537291
...I used the above referenced link to create a multi-select file upload tool (should've created an applet), but you should be able to adapt the same principal to paste the image over you're textbox but allow focus of your textbox while it stays visually in the background.

Cheers,

jesse
0
 
LVL 12

Expert Comment

by:jessegivy
ID: 19537300
>>you can't

only 12 percent of the population uses browsers other than IE, some developers have a small controlled client base that uses IE exclusively, or can be dominated to do so.   I wish I could rely on such a group.
0
 
LVL 11

Expert Comment

by:Vivek Thangaswamy
ID: 25363376
VirusMinus's suggestion was helpful
thanks
0
 
LVL 11

Expert Comment

by:Vivek Thangaswamy
ID: 25363405
Hi
i used the
#rounded-textbox {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background-color:#DDDDDD;
border:1px solid #7E94A6;
padding-left:2px;
padding-right:2px;
width:15em;
}

now how to change the font style for this text box?

 
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

834 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