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:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • MySpace
  • Slashdot
  • StumbleUpon
  • Technorati
  • TwitThis

If you enjoyed this post, make sure you subscribe to my RSS feed!

This entry was posted in Software and tagged , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.

13 Comments

  1. Posted July 3, 2009 at 9:47 am | Permalink

    for(var i=0;i<$(’input.rounded_input’).length;i ){
    roundInput(’rounded_input’ i ,’rounded_container’,’rounded_border’);
    }

  2. Posted July 3, 2009 at 10:32 am | Permalink

    Thanks Marcelo.

  3. Posted September 14, 2009 at 12:55 pm | Permalink

    Is a very nice a functional example. Thank!
    My contribution is this:

    javascript code:

    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;
    wrapper = input.wrap("").parent();
    wrapper.wrap("");
    wrapper.corner("round 5px").parent().css('padding', '1px').corner("round 6px");
    }
    $(document).ready(function() {
    $("form input.input_redondeado, form textarea.input_redondeado, form select.input_redondeado").each(function(){
    roundInput($(this).attr('id'),'contenido_redondeado','borde_redondeado');
    });
    });

    css code

    div.contenido_redondeado {
    background-color:#FFF;
    }
    div.borde_redondeado {
    background-color:#CCC;
    }
    input.input_redondeado{
    border:0;
    }

    This code change can all element with class “input_redondeado”, you can put different id name for form element.

    Use jQuery!.

    Bye.
    Aldo Saavedra Reyes
    http://www.webmasters.cl/
    http://www.webdesign.cl/

  4. Posted October 21, 2009 at 9:53 am | Permalink

    Marcelo, your code is wrong:
    $( function()
    {
    /*changed i=0 to i=1. at the end of for: i++*/
    for ( var i=1; i<=$(’input.rounded_input’).length; i++ )
    {
    /*put a plus in the first parameter so it’s ’rounded_input’+i*/
    roundInput(’rounded_input’+i ,’rounded_container’,’rounded_border’);
    }
    } );

  5. Daniel
    Posted August 4, 2010 at 3:36 pm | Permalink

    Looks good on Opera too!

  6. Uldis
    Posted August 22, 2010 at 11:43 am | Permalink

    Hi, realy good post. Tnx

  7. abner
    Posted August 25, 2010 at 12:00 am | Permalink

    any ie fixes?

  8. abner
    Posted August 25, 2010 at 12:19 am | Permalink

    ie8 fixes for transparent background i mean

  9. raydar32
    Posted February 9, 2011 at 5:57 am | Permalink

    Hi Tony,
    great post. Just wondering how you would apply this to a combo box ?

  10. Lucian
    Posted May 10, 2011 at 3:19 pm | Permalink

    Does anyone have a fix for IE 6 ,7 transparency ? I tried many methods , but without luck.

    Thank you!

  11. Posted November 29, 2011 at 12:25 am | Permalink

    Works great !
    One observation is that it won’t work with multi line text box of asp.net.

  12. Pancho
    Posted January 23, 2012 at 1:32 pm | Permalink

    heey, que pasa si cambio padding:1px ?? porque yo necesito border 1 px y se descuajeringa todo >__< in IE

  13. Posted November 28, 2012 at 4:13 am | Permalink

    Wow that was unusual. I just wrote an extremely long comment
    but after I clicked submit my comment didn’t show up. Grrrr… well I’m not writing all that over again.
    Anyways, just wanted to say wonderful blog!