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圆角代码。这个非常简单，易于编辑。适用于所有浏览器

check this link

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

Answer 7

将输入放在div中，并在div上设置圆角。删除输入自己的边框和填充，并使其与包装div一样大（减去div上所需的任何填充）。

Answer 8

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

然后你可以尝试jQuery Background Canvas。在表单后面插入一个单独的画布，并在文本框上绘制圆角。这是插件，这个网站大量使用它： jQuery Background Canvas Plugin

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

8 个答案: