<input type='text' /> 圆角使用 IE 的border-radius.htc

Question

我想创建一个带圆角的输入字段。

HTML：

<div id="RightColumn">
<input type="text" class="inputForm" />
</div>

CSS：

.inputForm
{
    -moz-border-radius:10px; /* Firefox */
    -webkit-border-radius: 10px; /* Safari, Chrome */
    -khtml-border-radius: 10px; /* KHTML */
    border-radius: 10px; /* CSS3 */
    behavior:url("border-radius.htc");
}

#RightColumn
{
    background-color:White;
}

但 IE 不显示输入字段的任何边框 - 更接近圆形或简单的边框。 当我删除#RightColumn 的 CSS 样式时，IE 会显示一个带有圆角的输入字段。 但我需要#RightColumn 的背景。

如何创建它？

Answer 1

哦，上帝，不要这样做。出于性能和清晰度的原因，HTC 文件从来都不是一个好主意，而且您使用了太多特定于供应商的参数，而这些参数可以很容易地跨浏览器一直到 IE6。

使用圆角将背景图像应用到您的输入字段，并使该字段的背景颜色透明并应用边框：无。

Answer 2

    border-bottom-color: #b3b3b3;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: #b3b3b3;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: #b3b3b3;
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: #b3b3b3;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-style: solid;
    border-top-width: 1px;

...谁在乎 IE6 我们在 2011 年升级，请醒醒！

Answer 3

如果您用于某些文本字段，请使用类

<style>
  .inputForm{
      border-radius:5px;
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
   }
</style>

在html代码中使用

 <input type="text" class="inputForm">

或者如果您想对所有输入类型文本字段执行此操作，则表示使用

<style>
    input[type="text"]{
      border-radius:5px;
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
    }
 </style>

在html代码中

<input type="text" name="name">

Answer 4

这在 IE

CSS3Pie

PIE 使 Internet Explorer 6-8 能够渲染几个 最有用的 CSS3 装饰功能。

Answer 5

W3C doc says regarding "border-radius" property: "在 IE9+、Firefox、Chrome、Safari 和 Opera 中支持"。

因此我假设您在 IE8 或更低版本上进行测试。

对于“常规元素”，有一个与 IE8 和其他旧/劣质浏览器兼容的解决方案。见下文。

HTML：

<div class="myWickedClass">
  <span class="myCoolItem">Some text</span> <span class="myCoolItem">Some text</span> <span class="myCoolItem"> Some text</span> <span class="myCoolItem">Some text</span>
</div>

CSS：

.myWickedClass{
  padding: 0 5px 0 0;
  background: #F7D358 url(../img/roundedCorner_right.png) top right no-repeat scroll;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  font: normal 11px Verdana, Helvetica, sans-serif;
  color: #A4A4A4;
}
.myWickedClass > .myCoolItem:first-child {
  padding-left: 6px;
  background: #F7D358 url(../img/roundedCorner_left.png) 0px 0px no-repeat scroll;
}
.myWickedClass > .myCoolItem {
  padding-right: 5px;
}

您需要同时创建 roundedCorner_right.png 和 roundedCorner_left.png。这些是 IE8（及以下）伪造圆角功能的解决方法。

因此，在上面的示例中，我们将左圆角应用于包含 div 中的第一个 span 元素，并将右圆角应用于包含 div。这些图像与浏览器提供的“方角”重叠，并给人一种圆角元素的错觉。

输入的想法是执行相同的逻辑。但是，输入是一个空元素，“元素是空的，它只包含属性”，换句话说，您不能将跨度包装到输入中，例如<input><span class="myCoolItem"></span></input>，然后使用背景图像，如前面的例子。

因此解决方案似乎是做相反的事情：将输入包装到另一个元素中。看到这个答案rounded corners of input elements in IE

Answer 6

从手机上写，但是 curvycorners 真的很好，因为它只有在浏览器默认不支持的情况下才会添加自己的边框。也就是说，已经支持部分 CSS3 的浏览器会使用自己的系统来提供角点。
https://code.google.com/p/curvycorners/