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

【问题标题】：How to get round corner textbox using jquery without images如何使用没有图像的jquery获得圆角文本框
【发布时间】：2010-11-21 20:45:10
【问题描述】：

我尝试为文本框制作圆角。但我怎么能得到它。这里是课堂

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

}

当我使用 jquery 调用时

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

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

【问题讨论】：

标签： javascript jquery css rounded-corners

【解决方案1】：

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

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

希望这会对你有所帮助。

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

我建议使用纯 CSS：

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

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

【讨论】：

最好不要使用 -moz 样式，因为它不是独立于浏览器的。
因此您可以将其视为使用符合 Web 标准的浏览器的奖励 :P 并且 -moz 本身可能很危险，但正如您所见，为了安全起见，我将 3 种样式一起使用。
这些都是 CSS3 特定的，许多浏览器不支持。
我真的很讨厌看到这些“纯 CSS”垃圾。使用 -moz 或 -webkit 不是“纯”css。废话。
@rahul 是的，如果它是 IE

【解决方案4】：

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

jQuery 小组建议将其用于圆角。
这是我见过的最好的。

【讨论】：

【解决方案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" />

【讨论】：

【解决方案6】：

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

check this link

注意：div 的圆角在包括 ie6 在内的所有浏览器中都有效，但文本框圆角在 ie6 中无效。

【讨论】：

【解决方案7】：

将输入放在一个 div 中，并在 div 上设置圆角。移除输入自身的边框和内边距，使其与包装 div 一样大（减去您想要的 div 上的任何内边距）。

【讨论】：

【解决方案8】：

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

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

【讨论】：