Text inputs with rounded corners using jQuery (without image)

I have yet to find a solution for making rounded inputs without an image. I hacked one together today because I know it will save me a lot of time later. While the solution is hackish, I like it better than going into photoshop and making an image every time I want to change the length of a text input.

The solution has two dependencies: jQuery and jQuery.corner. Download jQuery here and jQuery.corner here.

You can skip the explanation and go straight to the demo, or check out this quick explanation. Note that in an effort to get this done quickly, my code isn’t too smart and you may have to mess with some of the values depending on the size of your text inputs. I still think it beats the crap out of getting on photoshop for every change.

First you must include the necessary files:

<script src="./js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="./js/jquery.corner.js" type="text/javascript"></script>

and the roundInput function with the function calls:

/* input_id is the ID of the input element */
/* container_class will let you control the text input background color and padding */
/* border_class will let you control the border color */
function roundInput(input_id, container_class, border_class){
	var input = $('#'+input_id+'');
	var input_width = input.css("width"); //get the width of input
	var wrap_width = parseInt(input_width) + 10; //add 10 for padding
	wrapper = input.wrap("<div class='"+container_class+"'></div>").parent();
	wrapper.wrap("<div class='"+border_class+"' style='width: "+wrap_width+"px;'></div>"); //apply border
	wrapper.corner("round 8px").parent().css('padding', '2px').corner("round 10px"); //round box and border
}
 
/* round 2 inputs */
$(function(){
	roundInput('rounded_input1','rounded_container','rounded_border');
	roundInput('rounded_input2','rounded_container','rounded_border');
});

Obviously replace the above roundInput function calls with your own input id, container class, and border class. The CSS below allows you to control the border color, text input background color, and the space between the text input and the rounded corners.

<style>
/* Container class */
div.rounded_container{
        /* This background color should have the same background color as your text input */
        /* Changing this color will show you how the rounded input is laid out */
        background-color: #fff;
        /* This padding is between the text input and the rounded border on all sides */
        /* Decreasing the value may interfere with the rounded corners */
        padding: 4px;
}
/* Border class */		
div.rounded_border {  
	/* This is the color of your rounded border */
	background: #6666ff; 
}
input.rounded_input{
	border:0;
}
</style>

And finally the text inputs to round (replace these with your own):

<input id="rounded_input1" type="text" class="rounded_input" style="width: 286px;" />
<input id="rounded_input2" type="text" class="rounded_input" style="width: 286px;" />

This code has not been heavily tested, but it looks great on FF, IE7, Safari 5, and Chrome 5. I will post updated code if I decide to create something more flexible.

Enjoy the demo!

No TweetBacks yet. (Be the first to Tweet this post)

Share and Enjoy: