角が丸い入力フィールドを作成します。
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;
}
しかし、IEは入力フィールドの境界線を表示しません-丸みを帯びたシンプルな境界線です。#RightColumnのCSSスタイルを削除すると、IE角が丸いフィールドですが、#RightColumnの背景が必要です。
どうすれば作成できますか?
ああ、このようにしないでください。 HTCファイルは、パフォーマンスと明確さの理由から決して良いアイデアではありません。また、IE6に至るまでクロスブラウザで簡単に実行できることに対して、ベンダー固有のパラメーターを使いすぎています。
角の丸い入力フィールドに背景画像を適用し、代わりにborder:noneを適用して、フィールドの背景色を透明にします。
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;
... IE6を気にかけている人は2011年のアップグレードに参加し、目を覚ましてください!
特定のテキストフィールドに使用している場合は、クラスを使用します
<style>
.inputForm{
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
</style>
およびhtmlコードでの使用
<input type="text" class="inputForm">
または、すべての入力タイプのテキストフィールドでこれを行いたい場合は、
<style>
input[type="text"]{
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
</style>
およびhtmlコードで
<input type="text" name="name">
IE <9では動作しませんが、次を使用してIEでサポートすることができます:
PIEを使用すると、Internet Explorer 6-8で最も便利なCSS3装飾機能のいくつかをレンダリングできます。
W3C docは、「border-radius」プロパティに関して述べています :「IE9 +、Firefox、Chrome、Safari、およびOperaでサポートされています」。
したがって、IE8以下でテストしていると思います。
「通常の要素」には、IE8およびその他の古い/貧弱なブラウザと互換性のあるソリューションがあります。下記参照。
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;
}
両方roundedCorner_right.pngとroundedCorner_left.pngを作成する必要があります。これらは、角丸機能を偽造するためのIE8(および以下)の回避策です。
したがって、上記のこの例では、左端の角を含むdivの最初のspan要素に適用し、右端の角を含むdivに適用します。これらの画像は、ブラウザが提供する「角張った角」に重なり、丸みを帯びた要素の一部であるような錯覚を与えます。
入力のアイデアは、同じロジックを実行することです。ただし、入力は空の要素です、「要素は空です、属性のみが含まれます」、言い換えると、入力にスパンをラップすることはできません<input><span class="myCoolItem"></span></input>
その後、前の例のように背景画像を使用します。
したがって、解決策は反対のことを行うようです:入力を別の要素にラップします。この回答を参照してください IEの入力要素の丸い角
電話からの書き込みですが、curvycornersは、ブラウザがデフォルトでサポートしていない場合にのみ独自の境界線を追加するため、本当に優れています。言い換えれば、CSS3をすでにサポートしているブラウザは、独自のシステムを使用してコーナーを提供します。
https://code.google.com/p/curvycorners/