Takin' a Bathew » rounded corner http://bathew.com Tue, 07 Feb 2012 03:55:00 +0000 en hourly 1 http://wordpress.org/?v=3.3 Rounded Corner Form Elements http://bathew.com/playhouse/rounded-corner-form-elements/ http://bathew.com/playhouse/rounded-corner-form-elements/#comments Wed, 07 May 2008 22:05:06 +0000 mbathon http://www.bathew.com/?p=8 One task I am being faced with more often when creating form elements is the use of rounded corners on text inputs, select boxes and text areas. One solution in dealing with this dilemma is just to crop out the round corner image from the concept file, give the form elements a border that matched the background color and place them into that area. This way may be the simplest answer to the problem but it is riddled with problems.

  1. When a user resizes the text, the box will not expand.
  2. You will need a new image for each different size of input you need.
  3. Absolute positioning (and the resulting extra CSS lines will need to be added) is the only sure way to line up the inputs inside the image

In order to work through these issues and out clean scalable rounded corner form elements we will first begin by creating the HTML code for the input elements.

  • <strong>
  • <em>
  • <span>
  • <span>

These will provide the hooks our CSS will need in order to create the rounded corners. You can use any HTML tags you would like to surround the code as long as you can add a style to it.

The strong and the em tag will receive longer images that will account for and size changes on the input fields and text size increases. The other two images will just be images of the corners. The two longer images will need to have a transparent background for the color inside the lines. If you have a non-solid color background just make the bottom left image have the background and the top right image transparent.

The CSS

strong {background: url(/images/input-bottom-left.gif) no-repeat 0 100%; display: block; float: left;}/*longer sides*/
strong em {background: url(/images/input-top-right.gif) no-repeat 100% 0; display: block; float: left;}/*longer sides*/
strong em span {background: url(/images/input-bottom-right.gif) no-repeat 100% 100%; display: block; float: left;}
strong em span span {background: url(/images/input-top-left.gif) no-repeat; display: block; float: left;}
input, select, textarea {margin: 1px 3px; border: 1px solid #fff;}

The HTML

<form>
<fieldset>
<legend>Rounded Corner Form Elements</legend>
<label for="txtFirstName">First Name:</label>
<strong><em><span><span><input id="txtFirstName" maxlength="50" name="FirstName" size="25" type="text" /></span></span></em></strong><br />
<label for="txtLastName">Last Name:</label>
<strong><em><span><span><input id="txtLastName" maxlength="50" name="LastName" size="15" type="text" /></span></span></em></strong><br />
<label for="txtaraComment">Comment</label>
<strong><em><span><span><textarea id="txtaraComment" cols="50" rows="10" name="Comment"></textarea></span></span></em></strong><br />
</fieldset>
</form>
Rounded Corner Form Elements


]]> http://bathew.com/playhouse/rounded-corner-form-elements/feed/ 25