web-dev-qa-db-ja.com

フィールドセットの角を丸める

「fieldset」タグがIEに丸い角のボーダーをレンダリングします（他のブラウザでは四角形にレンダリングされます）。

<fieldset>
         <legend>My legend</legend>
</fieldset>

しかし、フィールドセットにCSSスタイルを設定すると、丸い角が消えます!!

誰かが理由を知っていますか？丸みを帯びた角を維持するが、別の境界線の色を使用する方法は？

[編集]：混乱して申し訳ありません。Firefox/その他のブラウザで角を丸くする方法は質問しません。角の丸い角を維持する方法を知りたいIEの場合で、別の境界線の色（ border-color：red;フィールドセットでは、丸みが正方形に変わります...）。

htmlcssinternet-explorerrounded-cornersfieldset
24
Olivier Payen

一部のアイテム（ボタン、入力ボックス）は、デフォルトでシステムの視覚スタイルを使用しています。デフォルトのWindows XP/Vistaテーマでは、フィールドセットの角が丸められています。 （たとえば、[画面のプロパティ]を見てください。）

たとえば、<input />にスタイルを割り当てると、ホバー効果、グラデーションなどが失われます。

7
grawity

このサイトでは、フィールドセットの角丸とIE10に関する問題が修正されています。 IE（悲しい顔）にはまだ問題があります。100％の時間で動作させるには、フロートさせる必要があります。

fieldset {
  margin: 20px;
  padding: 0 10px 10px;
  border: 1px solid #666;
  border-radius: 8px;
  box-shadow: 0 0 10px #666;
  padding-top: 10px;
}
legend {
  padding: 2px 4px;
  background: #fff;
  /* For better legibility against the box-shadow */
}
fieldset > legend {
  float: left;
  margin-top: -20px;
}
fieldset > legend + * {
  clear: both;
}
<fieldset>
  <legend>Legend</legend>
</fieldset>

http://www.456bereastreet.com/archive/201302/fieldset_legend_border-radius_and_box-shadow/

15
Tim

そのような理由はありませんが、ブラウザの動作が異なることは秘密ではありません。

-moz-border-radius 属性を調べましたか？

のようなものだと思います

fieldset {   
  -moz-border-radius:5px;  
  border-radius: 5px;  
  -webkit-border-radius: 5px; //edit :D
}

fireFox/Mozillaで動作しますが、試してから久しぶりです：D

13
inspite

IEのボーダーは、1の場合にのみ丸められます）[パフォーマンス]で[ボタンのウィンドウでビジュアルスタイルを使用する]が有効になっています。視覚効果タブ。端的に言えば、「XPテーマ」を有効にしている場合は丸められ、クラシックなWin2000の外観を持っている場合は丸められません。

2番目の要件2）は、フィールドセットの「ボーダー関連のCSSなし」です。 border-color、border-style、またはborder-widthを割り当てると、「丸み」はなくなり、回避策はありません。入力（ボタンとフィールドの両方）、テキストボックス、選択タグについても同様です。 IEは、コントロールがレンダリングするCSSテーマを検出しない場合は常に、「デフォルトのWindowsテーマ」をコントロールに適用します。

8
ELDopa

http://www.webteacher.ws/2010/02/27/style-a-fieldset-with-rounded-corners-using-css/

0
flig

CSS 3のborder-radiusプロパティを使用できます。これは、FirefoxおよびSafariで機能します。

fieldset {
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}
0
Absolut40