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。

使用圆角将背景图像应用于输入字段，并使字段的背景颜色透明，而使用border：none代替。

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＆lt; 9中不起作用，但是，您可以使用以下方式支持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 ＆amp;的 roundedCorner_left.png 即可。这些可以解决IE8（及以下）伪造圆角功能。

因此，在上面的示例中，我们将左圆角应用于包含div中的第一个span元素，＆amp;我们将右圆角应用于包含div。这些图像与浏览器提供的“squary corner”重叠。给出成为圆形元素一部分的错觉。

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

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

Answer 6

从手机上写字，但是曲线调制器非常好，因为只有在默认情况下浏览器不支持时，它才会添加自己的边框。换句话说，已经支持某些CSS3的浏览器将使用他们自己的系统来提供角落 https://code.google.com/p/curvycorners/

使用border-radius.htc为IE输入<input type =“text”/>的圆角

6 个答案: