CSS3 Abgerundete Ecke für Eingabeelement ohne js/images

Wer kann die abgerundete Ecke für Eingabeelemente erstellen?CSS3 Abgerundete Ecke für Eingabeelement ohne js/images

ich einen Weg brauchen, ohne Javascript und Bilder ..

hinzugefügt werden:

<!DOCTYPE html> 
<html> 
<head>  
    <title>xx</title> 
<style type="text/css"> 
input 
{ 
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
    border-radius: 15px; 
} 
</style> 
</head> 
<body> 
<input type="text" value="test" /> 
</body> 
</html>

Es funktioniert nicht in Firefox 3.6.12!

Quelle

2010-11-30 Isis

möglich Duplikat von [Was ist der beste Weg, um abgerundete Ecken mit CSS zu erstellen?] (Http://stackoverflow.com/questions/7089/what-ist-the-best-way-to-create-rounded-corner -using-css) – codingbadger

Siehe meine bearbeitete Antwort. Sie haben einen Fehler in Ihrem Code. –

@barry: Dies ist kein Duplikat, es ist ein anderes Problem: sehr einfach, falscher Code (wie evan und ich gepostet) – oezi

CSS3 viele neue Features, die Web-Designer profitieren. Dazu gehören Grenz Rundung:

input 
{ 
    -webkit-border-radius: 5px; //For Safari, etc. 
    -moz-border-radius: 5px; //For Mozilla, etc. 
    border-radius: 5px; //CSS3 Feature 
}

Sie können eine Klasse auf Ihre Eingabefelder hinzufügen und diese Klasse in dieser CSS-Schnipsel verwenden, um bestimmte Eingabeelemente zu zielen.

Internet Explorer 8 nicht unterstützt CSS3. Internet Explorer 9 wird hoffentlich alle seine Funktionen enthalten.

In Bezug auf Ihre editierten Frage:

"text/css/" sollte "text/css" sein.

Quelle

2010-11-30 12:59:21

CSS 3 wird Ihnen helfen.

Dieses Stylesheet Arbeiten für Eingabeelemente auch [in modernen Browsern atleast], die aber nicht in IE getestet hat

border-radius: 16px; /* half of button size + padding */ 
-moz-border-radius: 16px; 
background: -webkit-gradient(linear, left top, left bottom, from(#8cc0f6), to(#cfe4fa)); 
background: -moz-linear-gradient(top, #8cc0f6, #cfe4fa);

Quelle

2010-11-30 12:55:11

Ich brauche es für INPUT-Elemente – Isis

@lsis: Hast du die Antwort gelesen? "Dieses Stylesheet funktioniert für Eingabeelemente auch [in modernen Browsern atleast], obwohl nicht in IE getestet" –

@Jannis, habe ich später nach dem Lesen @ Isis Kommentar aktualisiert –

so, wie Sie tun es richtig ist (für moderne Browser), das Problem ist, dass Sie falsche Öffnung Stil tag:

<style type="text/css/"> 
        ^^^ this/shouldn't be there

beachten Sie, dass die gerundeten Ecken wird im IE nicht funktionieren mit Ihnen CSS, Um dies zu erreichen, müssen Sie sich http://css3pie.com/ ansehen oder images/jsvascript verwenden.

Quelle

2010-11-30 13:16:24 oezi

Für modernen Browser, verwenden Sie den folgenden CSS-Code:

input { 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    border-radius:6px; 
}

Mit anderen Worten, genau so ziemlich, was Sie bereits getan haben.

Dies sollten Sie Ecken erhalten abgerundet auseinander in allen gängigen Browsern von IE.

Ich vermute, dass der Grund, warum es nicht funktioniert, ist entweder (a) Sie testen es in IE (unten Lösung sehen), oder (b), weil Ihr <style>-Tag hat ein falsches type Attribut. Wahrscheinlich benötigen Sie das Attribut type überhaupt nicht. Ich würde vorschlagen, es ganz zu löschen (es wird normalerweise nur gesehen, wenn Stylesheets von einer externen Quelle geladen werden). Wenn Sie es beibehalten, löschen Sie den abschließenden Schrägstrich, da dies definitiv falsch ist.

Für IE, die Lösung ist komplizierter:

von weit die beste Lösung für die CSS3 Ecke Problem in IE gerundet ist CSS3Pie.

Es ist ein IE-nur Hack basierend auf einem IE-Feature namens CSS-Verhaltensweisen. Dies bedeutet, dass Nicht-IE-Browser es vollständig ignorieren und nicht einmal die .HTC-Datei herunterladen müssen, die den Hack enthält.

Erzeugt echte abgerundete Ecken mit der VML-Vektorgraphik-Bibliothek von IE, so dass Sie niemals gezackte Ränder oder nicht übereinstimmende Hintergrundfarben oder -muster haben.

Obwohl es ein paar bekannte Probleme hat, ist es in der aktiven Entwicklung, und sogar die Probleme, die es hat, sind weit weniger problematisch als die von jeder anderen Lösung.

CSS Behaviors ist auf Javascript basiert - Sie werden nicht eine Lösung für Ihr Problem finden, das Javascript nicht irgendwo entlang der Strecke benutzen (es sei denn, Sie planen, altmodische Ecke Grafiken für alles verwenden), sondern weil Es ist in einer MS-spezifischen HTC-Datei enthalten, andere Browser müssen es nie wissen, so dass Sie normales CSS3 für sie ohne Javascript verwenden können.

Dies bedeutet, dass im unwahrscheinlichen Fall, dass ein IE-Benutzer Javascript ausgeschaltet hat, dann ja, sie werden quadratische Ecken bekommen. Aber Sie können ziemlich sicher sein, dass sie eine verschwindend kleine Minderheit sein werden.

Quelle

2010-11-30 13:52:22 Spudley

CSS3 Abgerundete Ecke für Eingabeelement ohne js/images

Antwort

Verwandte Themen