如何使用沒有圖像的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圓角文本框

回答

相關問題