How to get round corner textbox using jquery without images

Question

I try to get round corners for textbox. But how can i get it. Here is the class

.tbox
{
 float:left;
 width:200px;
 margin-top:10px;
 margin-left:10px;

}

when i call using jquery using

$('.tbox').corners("4px");

it is not working. I already included Jquery.js and jquery.corners.js. But its not working. Any help would be appreciated

Answer 1

You can make a rounded corner div and inside that place a text box with no borders. I think this will be the easiest way to accomplish your need.

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

<script>
    $(document).ready ( function () {
        $("#div1").corner("round");
    });
</script>

<style>
#div1 { width: 200px; height: 30px; background-color: #a9a9a9; }
#txtBox { width: 180px; height: 20px; background-color: transparent; position: relative; top: 5px; left: 10px; border-style: none; }
</style>


<div id="div1">
    <input type="text" id="txtBox" />
</div>

Answer 2

I suggest using pure CSS:

border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;

However it won't work in IE, but I treat it as punishment for using this browser :D With next version it will work probably.

Answer 3

You can add following class to the textbox for rounded corner: class="text ui-widget-content ui-corner-all"

Hope this would help you.

Answer 4

Hi,

I found a css rounded corners code with javascript. This one is quite simple and easy to edit. Works in all browsers

check this link

Note: The rounded corners for div's is working in all browsers including ie6, but the text box rounded corners is not working in ie6.

Answer 5

You can do it easily with DD_roundies

jQuery group suggested using it for rounding corners.
its the best i've seen.

Answer 6

Put the input inside a div, and set rounded corners on the div. Remove the input's own borders and padding and make it as big as the wrapper div (minus any padding you want on the div).

Answer 7

Are you an experienced JavaScript programmer and can you handle the HTML5 Canvas element?

Then you can give jQuery Background Canvas a try. Inject one single canvas behind your form and draw rounded corners on your text box. Here is the plugin, and this site makes a vast use of it: jQuery Background Canvas Plugin