2009-08-22 5 views
4

Ich versuche, Ecken für Textbox zu bekommen. Aber wie kann ich es bekommen? Hier ist die KlasseWie bekomme ich die Ecke Textbox mit jquery ohne Bilder

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

} 

wenn ich jquery Anruf mit mit

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

es funktioniert nicht. Ich habe bereits Jquery.js und jquery.corners.js eingeschlossen. Aber es funktioniert nicht. Jede Hilfe würde geschätzt werden

Antwort

5

Sie können eine abgerundete Ecke div machen und innerhalb dieser ein Textfeld ohne Grenzen platzieren. Ich denke, dies wird der einfachste Weg sein, um Ihre Bedürfnisse zu erfüllen.

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

Ich schlage vor, mit reiner CSS:

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

jedoch nicht in IE funktionieren wird, aber ich behandle sie als Strafe für die Verwendung dieses Browser: D Mit nächster Version wird es wahrscheinlich funktionieren.

+0

Besser nicht zu verwenden -Moz Stile, da es nicht Browser unabhängig ist. – rahul

+1

Sie können auch keinen Benutzer für die Verwendung eines bestimmten Browsers bestrafen. – rahul

+0

So können Sie behandeln ist eine Belohnung für die Verwendung von Browser, der Web-Standards hält: P And-moz selbst kann gefährlich sein, aber wie Sie sehen können, verwende ich 3 Stile zusammen, um sicher zu sein. – Thinker

8

Sie können folgende Klasse in die Textbox für abgerundete Ecke hinzufügen:

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

Hope this Sie helfen würde.

0

Ich fand einen CSS-Code mit abgerundeten Ecken mit Javascript. Dieser ist ziemlich einfach und leicht zu bearbeiten. Funktioniert in allen

check this link

Hinweis Browser: Die abgerundeten Ecken für divs wird in allen Browsern wie IE6 arbeiten, aber das Textfeld Ecken abgerundet ist nicht in IE6 arbeiten.

2

Sie können es leicht tun mit DD_roundies

jQuery Gruppe vorgeschlagen es zum Runden Ecke verwenden.
es ist das Beste, was ich gesehen habe.

0

Setzen Sie die Eingabe in ein div und setzen Sie abgerundete Ecken auf div. Entfernen Sie die eigenen Grenzen und den Abstand der Eingabe und machen Sie sie so groß wie das Wrapper-Div (abzüglich der gewünschten Abstände für das Div).

0

Sind Sie ein erfahrener JavaScript-Programmierer und können Sie mit dem HTML5-Canvas-Element umgehen?

Dann können Sie jQuery Background Canvas ausprobieren. Injizieren Sie eine einzelne Leinwand hinter Ihr Formular und zeichnen Sie abgerundete Ecken auf Ihrem Textfeld. Hier ist das Plugin, und diese Seite macht eine große Verwendung davon:

1

Es scheint, dass Arka Chatterjee die beste Lösung für die Verwendung von jquery, um abgerundete Ecken zu erstellen vorgeschlagen. Verweisen Sie einfach auf die Dateien jquery-ui.css und jquery-ui.min.js und fügen Sie dann die genannten Klassen hinzu. Ich hätte dafür gestimmt, aber ich habe noch nicht genug "Renommee". Hier ein Beispiel:

<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" /> 
Verwandte Themen