如何使用jquery获取没有图像的圆角文本框

Question

我尝试为文本框设置圆角。但我怎样才能得到它。 类，

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

}

这是我使用 jquery 调用时的

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

它不起作用。我已经包含了 Jquery.js 和 jquery.corners.js。但它不起作用。任何帮助将不胜感激

Answer 1

您可以将以下类添加到圆角的文本框中：

class="text ui-widget-content ui-corner-all"

希望这会对您有所帮助。

Answer 2

您可以制作一个圆角 div，并在其中放置一个无边框的文本框。我认为这将是满足您需求的最简单方法。

<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 3

我建议使用纯 CSS：

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

但是它在 IE 中不起作用，但我将其视为使用此浏览器的惩罚：D 在下一个版本中它可能会起作用。

Answer 4

您可以使用 DD_roundies 轻松完成此操作，

jQuery 组建议使用它来实现圆角。

这是我见过的最好的。

Answer 5

看来Arka Chatterjee提出了使用jquery创建圆角的最佳解决方案。只需引用文件 jquery-ui.css 和 jquery-ui.min.js 然后添加提到的类。我本来会投票支持它，但我还没有足够的“声誉”。这是一个例子：

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>

<input type="text" class="text ui-widget-content ui-corner-all" id="txtBox" />

Answer 6

我发现了一个带有 javascript 的 css 圆角代码。这个非常简单且易于编辑。适用于所有浏览器

检查此链接

注意：div 的圆角适用于包括 ie6 在内的所有浏览器，但文本框圆角不适用于 ie6。

Answer 7

将输入放入 div 内，并在 div 上设置圆角。删除输入本身的边框和填充，并使其与包装 div 一样大（减去您想要在 div 上使用的任何填充）。

Answer 8

您是一位经验丰富的 JavaScript 程序员吗？您能处理 HTML5 Canvas 元素吗？

那么你可以尝试一下 jQuery Background Canvas。在表单后面插入一张画布，并在文本框上绘制圆角。这是这个插件，这个网站大量使用了它：
jQuery 背景画布插件