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

我试图找到文本框的圆角。但我怎么能得到它。这里是类如何使用没有图像的jquery圆角文本框

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

}

当我打电话使用jquery使用

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

它无法正常工作。我已经包含了Jquery.js和jquery.corners.js。但它不工作。任何帮助，将不胜感激

来源

2009-08-22 Rajasekar

你可以做一个圆角的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>

来源

2009-08-22 06:12:15 rahul

我建议用纯CSS：

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

但是它不会在IE工作，但我把它当作惩罚使用这个浏览器：d随着以后的版本可能会工作。

来源

2009-08-22 06:30:09 Thinker

最好不要使用-moz样式，因为它不是独立于浏览器的。 – rahul 2009-08-22 06:37:35

你也不能惩罚用户使用特定的浏览器。 – rahul 2009-08-22 06:38:11

所以你可以把它当作是使用浏览器的奖励，它会使用Web标准：P和-moz本身可能是危险的，但正如你所看到的，我一起使用3种风格是安全的。 – Thinker 2009-08-22 06:44:29

您可以添加下面的类的文本框为圆角：

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

希望这会帮助你。

来源

2009-08-22 07:37:40

我用javascript找到了一个css圆角代码。这一个很简单，易于编辑。工程在所有浏览器

check this link

注：圆角的div的是在所有的浏览器IE6，包括工作，但文本框中圆角并不在IE6工作。

来源

2009-08-22 08:40:46

您可以DD_roundies

jQuery的组做很容易使用它四舍五入的角落建议。
它是我见过的最好的。

来源

2009-08-22 09:12:44 vsync

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

来源

2009-08-22 10:36:55 bobince

您是否是一位经验丰富的JavaScript程序员，您是否可以处理HTML5 Canvas元素？

然后，您可以尝试jQuery背景画布。在窗体后面注入一个单独的画布，并在文本框上绘制圆角。这里是插件，这个网站使用它： jQuery Background Canvas Plugin

来源

2009-09-06 07:25:44

看来，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" />

来源

2011-03-07 17:30:43

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

回答

相关问题