7
A
Antwort
1
Beide Antworten sind richtig können Sie entweder CSS3 Arten (die mit der nicht wirklich unterstützt werden aktuelle IEs) oder Sie können ein JavaScript-Paket wie http://www.malsup.com/jquery/corner/ verwenden.
Es gibt jedoch eine andere Option, die nicht verworfen werden sollte, obwohl sie nicht gerade ideal ist. Wenn Sie Ihre Eingaben mit fester Länge sind, können Sie auch unabhängig von Hintergrund ziehen (einschließlich Grenzen), die Sie für Ihre Eingaben in ein Bild und verwenden möchten
background: transparent url(pathToYourImage.png);
border: none;
Dies den Vorteil der Arbeit auf so ziemlich alle Browser hat man sich denken kann.
+0
hi, das von dir vorgeschlagene plugin ist cool und ich benutze es für divs. Leider funktioniert es nicht für Texteingabefelder ... irgendein Tipp? – aneuryzm
+0
Wickeln Sie einfach Ihre Eingaben in ein div? –
+0
Nein, es funktioniert nicht. Der Wrapper ist modifiziert, aber es ist nur dahinter platziert. – aneuryzm
5
Mit CSS3:
/* css 3 */
border-radius:5px;
/* mozilla */
-moz-border-radius:5px;
/* webkit */
-webkit-border-radius:5px;
0
Probieren Sie etwas wie folgt aus: http://hannivoort.org/test/InputRoundedCorners.asp
0
in modernen Browsern css3
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
bei älteren Sie eine JS verwenden benötigen wie jquery mit rounded corners plugin oder Ruzee
0
Vielleicht könnten Sie die Umrisse aus den Eingabefeldern entfernen und dann mit jQuery sie in einem Curved Box setzen ...
0
^das letzte wird auf allen Browsern funktionieren. Einige Browser fügen jedoch eine Gliederung hinzu! Chrome, Safari usw.
Ich weiß, dass Sie den Umriss in Chrom mit outline: 0 deaktivieren können, aber es gibt keine Möglichkeit, wo ich den Umriss in Safari deaktivieren kann. Es wird scheußlich darin aussehen!
-1
Verwenden Sie border-radius Verwenden Sie Pixel nach Ihrem Layout.
+1
Sie sollten ein Beispiel hinzufügen, das erklärt, wie es funktioniert. – Mike
+0
'Grenzradius: 2px; ' –
Verwandte Themen
- 1. CSS-Selektor für Texteingabefelder?
- 2. CSS gerundete Ecken
- 3. CSS div gerundete Ecken
- 4. Texteingabefelder in iMacros
- 5. Javascript Texteingabefelder, die Anweisung (Platzhalter) Text anzeigen
- 6. Kontinuierlich überwachen 3 Texteingabefelder mit jquery
- 7. wie 4 Texteingabefelder in HTML in Form einer Treppe auszurichten?
- 8. Können Sie in Photoshop gerundete Pixelecken festlegen?
- 9. Texteingabefelder in Flex, wenn voll abgeschirmt nicht funktioniert
- 10. Primefaces Diagramm + jqplot extender - gerundete Wert in der y-Achse
- 11. Wie macht man die UISlider-Ausgabe schön gerundete Zahlen exponentiell?
- 12. MVC-Validierung, Regulärer Ausdruck für eine gerundete Stunde
- 13. So speichern Sie eine gerundete Version auf dem Bild mit Carrierwave
- 14. Css kombiniert mehrere Hover-Effekte
- 15. Problem mit der Tabulatortaste bis 4 Texteingabefelder in Action Script 3
- 16. Wie werden gerundete Boxen und Trennzeichen entworfen (wie in der App-Ansicht)?
- 17. Probleme mit UIImageView.layer.cornerRadius, um gerundete Bilder auf verschiedenen Pixeldichten zu erstellen ios
- 18. Wie kann ich eine gerundete (eingekreiste) ImageView-Box in Android Studio erstellen?
- 19. In Winkel 2, wie wird eine Zahl als zwei dezimale gerundete Währung angezeigt?
- 20. CSS-Gliederung mit CSS-Rahmen
- 21. Probleme beim Runden von Zellen in einem Array, während immer noch eine nicht gerundete Kopie davon angezeigt wird
- 22. CSS - Wenden Sie css-Regel an, wenn zwei css-Klassen mit anderen css-Klassen vorhanden sind
- 23. Mimic: Hover CSS mit einer CSS-Klasse
- 24. Verzögerung CSS CSS-Animation Zwischen Schleife
- 25. Meine CSS werden überschrieben von Bootstrap CSS
- 26. Überlagert eingebettete CSS immer externe CSS?
- 27. CSS calc() Verhalten in CSS Variablen
- 28. Wie viel CSS ist zu viel CSS?
- 29. CSS-Layout, verwenden CSS neu anordnen DIVs
- 30. CSS box-shadow in jQuery .css()
Obwohl einige der Antworten unten funktionieren, ist die Antwort mit CSS3 wahrscheinlich die stärkere Lösung in den heutigen Webstandards. Die meisten Browser unterstützen heutzutage CSS3. – ScottyG