wake-up-neo.com

Abgerundete Ecken für <input type = 'text' /> mit border-radius.htc für IE

Ich möchte ein Eingabefeld mit abgerundeten Ecken erstellen.

HTML:

<div id="RightColumn">
<input type="text" class="inputForm" />
</div>

CSS:

.inputForm
{
    -moz-border-radius:10px; /* Firefox */
    -webkit-border-radius: 10px; /* Safari, Chrome */
    -khtml-border-radius: 10px; /* KHTML */
    border-radius: 10px; /* CSS3 */
    behavior:url("border-radius.htc");
}

#RightColumn
{
    background-color:White;
}

Aber IE zeigt keine Rahmen für Eingabefelder an - weder abgerundete noch einfache Rahmen. Wenn ich den CSS-Stil für #RightColumn entferne, zeigt IE eine Eingabe an Felder mit abgerundeten Ecken, aber ich brauche Hintergrund für #RightColumn.

Wie kann ich es erstellen?

27
Sir Hally

Oh Herr, mach das nicht so. HTC-Dateien sind aus Gründen der Leistung und Übersichtlichkeit keine gute Idee, und Sie verwenden zu viele herstellerspezifische Parameter für etwas, das problemlos über den gesamten Browser hinweg bis zum IE6 durchgeführt werden kann.

Wenden Sie ein Hintergrundbild mit den abgerundeten Ecken auf Ihr Eingabefeld an und machen Sie die Hintergrundfarbe des Feldes mit Rahmen transparent: Keine wird stattdessen angewendet.

38
hollsk
    border-bottom-color: #b3b3b3;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: #b3b3b3;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: #b3b3b3;
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: #b3b3b3;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-style: solid;
    border-top-width: 1px;

... Wen kümmert es, IE6 wir sind 2011 upgraden und bitte aufwachen!

16
pancho

wenn Sie für ein bestimmtes Textfeld verwenden, verwenden Sie die Klasse

<style>
  .inputForm{
      border-radius:5px;
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
   }
</style>

und in HTML-Code verwenden

 <input type="text" class="inputForm">

oder wenn Sie dies für alle Eingabetypen tun möchten, verwenden Sie das Textfeld

<style>
    input[type="text"]{
      border-radius:5px;
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
    }
 </style>

und im HTML-Code

<input type="text" name="name">
4
Raja Manickam

Dies funktioniert in IE <9 nicht. Sie können IEs jedoch dazu bringen, dies zu unterstützen, indem Sie Folgendes verwenden:

CSS3Pie

Mit PIE ist Internet Explorer 6-8 in der Lage, einige der nützlichsten CSS3-Dekorationsfunktionen zu rendern.

3
Sarfraz

W3C-Dokument sagt bezüglich "border-radius" -Eigenschaft : "Wird in IE9 +, Firefox, Chrome, Safari und Opera unterstützt".

Daher gehe ich davon aus, dass Sie auf IE8 oder niedriger testen.

Für "reguläre Elemente" gibt es eine Lösung, die mit IE8 und anderen alten/schlechten Browsern kompatibel ist. Siehe unten.

HTML:

<div class="myWickedClass">
  <span class="myCoolItem">Some text</span> <span class="myCoolItem">Some text</span> <span class="myCoolItem"> Some text</span> <span class="myCoolItem">Some text</span>
</div>

CSS:

.myWickedClass{
  padding: 0 5px 0 0;
  background: #F7D358 url(../img/roundedCorner_right.png) top right no-repeat scroll;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  font: normal 11px Verdana, Helvetica, sans-serif;
  color: #A4A4A4;
}
.myWickedClass > .myCoolItem:first-child {
  padding-left: 6px;
  background: #F7D358 url(../img/roundedCorner_left.png) 0px 0px no-repeat scroll;
}
.myWickedClass > .myCoolItem {
  padding-right: 5px;
}

Sie müssen sowohl roundCorner_right.png als auch roundCorner_left.png erstellen. Dies ist eine Umgehungsmöglichkeit für IE8 (& amp; unten), um die abgerundete Ecke zu fälschen.

In diesem obigen Beispiel wird die linke abgerundete Ecke auf das erste Span-Element im enthaltenden Div angewendet, und die rechte abgerundete Ecke wird auf das enthaltende Div angewendet. Diese Bilder überlappen die vom Browser bereitgestellten "eckigen Ecken" und geben die Illusion, Teil eines abgerundeten Elements zu sein.

Die Idee für Eingänge wäre, die gleiche Logik zu machen. Eingabe ist jedoch ein leeres Element, "Element ist leer, es enthält nur Attribute", in anderen Worten können Sie einen Bereich nicht in eine Eingabe wie z wie <input><span class="myCoolItem"></span></input>, um dann Hintergrundbilder wie im vorherigen Beispiel zu verwenden.

Daher scheint die Lösung das Gegenteil zu sein: Wickeln Sie die Eingabe in ein anderes Element. siehe diese Antwort abgerundete Ecken der Eingabeelemente im IE

2
Adrien Be

Das Schreiben vom Handy aus, aber kurvenreiche Ecken sind wirklich gut, da es nur dann eigene Rahmen hinzufügt, wenn der Browser dies nicht standardmäßig unterstützt. Mit anderen Worten, Browser, die bereits einige CSS3 unterstützen, verwenden ein eigenes System, um Ecken bereitzustellen.
https://code.google.com/p/curvycorners/

1
jolt