Rounded corners on a fieldset

对着背影说爱祢 提交于 2019-12-18 03:49:20

问题


I noticed that the "fieldset" tag renders a rounded corner border on IE (it renders squared on the other browsers).

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

BUT if i set a CSS style on the fieldset, the rounded corners disappear!!

Anybody know why? How to keep the rounded corners but with another border color?

[EDIT] : sorry for the confusion, i don't ask how to have rounder corners on firefox/other browsers, i want to know how to keep the rounder corners on IE and have another border color (border-color:red; on the fieldset changes the rounds to squares...).


回答1:


Some items (buttons, input boxes) are using the system visual styles by default - and in the default Windows XP/Vista themes, fieldsets have rounded corners. (Take a look at Display Properties, for example.)

If you assign any style to an <input />, for example, it will lose its hover effects, gradients and other things too.




回答2:


This site has a fix for the issues concerning fieldset rounded corners and IE10. There are still issues in IE (sad face). You have to float it to work 100% of the time.

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/




回答3:


There is no WHY as such, it is no secret that the browsers behave differently.

Have you explored the -moz-border-radius attribute?

I think something like

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

works in FireFox/Mozilla, but it has been a long time since I tried :D




回答4:


The borders in IE are only round when 1) You have the 'Use visual styles on windows on buttons' enabled under the Performance | Visual Effects tab. To put it blunt: if you have 'XP theming' enabled it will be rounded, when you have the classic Win2000 look, it will not be rounded.

The second requirement 2) is 'no border-related CSS' for the fieldset. Whenever you assign a border-color, or border-style, or border-width, the 'roundness' is gone, there is no workaround for that. The same goes for input (both buttons and fields), textbox and select-tags. Whenever IE finds no CSS theming for the control to render it will apply the 'default Windows theme' to the control.




回答5:


You could use CSS 3 border-radius property, which will work on Firefox and 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
}


来源:https://stackoverflow.com/questions/940191/rounded-corners-on-a-fieldset

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!