web-dev-qa-db-ja.com

IEにborder-radius.htcを使用して<input type = 'text' />の角を丸くする

角が丸い入力フィールドを作成します。

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の背景が必要です。

どうすれば作成できますか？

cssinternet-explorerinternet-explorer-8rounded-cornerscss3
27
Sir Hally

ああ、このようにしないでください。 HTCファイルは、パフォーマンスと明確さの理由から決して良いアイデアではありません。また、IE6に至るまでクロスブラウザで簡単に実行できることに対して、ベンダー固有のパラメーターを使いすぎています。

角の丸い入力フィールドに背景画像を適用し、代わりにborder：noneを適用して、フィールドの背景色を透明にします。

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;

... IE6を気にかけている人は2011年のアップグレードに参加し、目を覚ましてください！

16
pancho

特定のテキストフィールドに使用している場合は、クラスを使用します

<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">
4
Raja Manickam

IE <9では動作しませんが、次を使用してIEでサポートすることができます：

CSS3Pie

PIEを使用すると、Internet Explorer 6-8で最も便利なCSS3装飾機能のいくつかをレンダリングできます。

3
Sarfraz

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の入力要素の丸い角

2
Adrien Be

電話からの書き込みですが、curvycornersは、ブラウザがデフォルトでサポートしていない場合にのみ独自の境界線を追加するため、本当に優れています。言い換えれば、CSS3をすでにサポートしているブラウザは、独自のシステムを使用してコーナーを提供します。
https://code.google.com/p/curvycorners/

1
jolt