I have yet to find a solution for making rounded inputs without an image. I hacked one together today because I feel like it will me a lot of time. 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 this code is not too smart quite yet 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 and IE7. I will post updated code as this gets better and more flexible.
Enjoy the demo!
If you enjoyed this post, make sure you subscribe to my RSS feed!
4 Comments
for(var i=0;i<$(’input.rounded_input’).length;i ){
roundInput(’rounded_input’ i ,’rounded_container’,’rounded_border’);
}
Thanks Marcelo.
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/
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’);
}
} );