input,textarea的border-radius 无效

  • Post author:
  • Post category:其他




原文地址:


input,textarea的border-radius




作者:


rancy

Opera 10.5 默认的设置不了 input 和 textarea 的圆角:
input[type="text"], textarea { border-radius:5px;}


如上,如果我这么写,在 Opera 下是没有圆角效果的,而在 Chrome 下是有的,顺便测试了下 Firefox 和 Safari:
input[type="text"], textarea { border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}


默认情况下,Opera 和 Firefox 不会现出圆角效果,而 Chrome 和 Safari 可以,在 Opera 和 Firefox 下要想显示出圆角效果必须设置其 border-style(不能为 none):
input[type="text"], textarea { border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-style:solid;}


或者直接设置其 width、style、color:
input[type="text"], textarea { border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid #ccc;}

border-raius:2px;和border-style:solid;两行代码也可以实现