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

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

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

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

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

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

Ответ 1

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

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

Ответ 2

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

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

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

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

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

Ответ 3

На этом сайте есть исправление проблем, связанных с закругленными углами поля и 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>

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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

Ответ 7

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