Закругленные углы на полевом поле

Question

Я заметил, что тег «fieldset» оказывает округлую угловую границу на IE (он отображает квадрат в других браузерах).

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

НО, если я установил стиль CSS на полевом наборе, закругленные углы исчезнут!

Кто-нибудь знает почему? Как сохранить закругленные углы, но с другим цветом границы?

[EDIT]: извините за сумбур, я не спрашиваю, как у круглех углы на Firefox/других браузерах, я хочу знать, как держать округлые углы на IE и имею другой цвет границы (граница -цвет: красный, на полевом поле меняют раунды на квадраты ...).

Answer 1

Некоторые элементы (кнопки, поля ввода) используют систему визуальных стилей по умолчанию - и по умолчанию темы для Windows XP/Vista, fieldsets закругленными кор ЧПЧ. (Например, посмотрите Свойства экрана).

Если вы присвоите какой-либо стиль <input />, например, он потеряет эффекты зависания, градиенты и другие вещи.

Answer 2

Нет ПОЧЕМУ как таковое, не секрет, что браузеры ведут себя по-разному.

Вы изучили атрибут -moz-border-radius?

Я думаю, что-то вроде

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

работает в FireFox/Mozilla, но это было давно, так как я пробовал: D

Answer 3

Вы можете использовать CSS 3 границы радиуса свойство, которое будет работать на Firefox и Safari:

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

Answer 4

Границы в IE только круглые, когда 1) У вас есть «Использовать визуальные стили на окнах на кнопках», включенных в разделе «Производительность | Вкладка «Визуальные эффекты». Если говорить об этом, если вы включили «XP theming», он будет округлен, когда у вас будет классический внешний вид Win2000, он не будет округлен.

Второе требование 2) является «не связанным с границами CSS» для набора полей. Всякий раз, когда вы назначаете пограничный цвет или пограничный стиль или ширину границы, «округлость» отсутствует, для этого не существует обходного пути. То же самое касается ввода (обе кнопки и поля), текстовое поле и теги-метки. Всякий раз, когда IE не находит CSS-тегов для управления для визуализации, он будет применять «стандартную тему Windows» к элементу управления.

Answer 5

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

Answer 6

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

Answer 7

Этот сайт имеет исправление проблем, касающихся FIELDSET закругленные углы и 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/