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

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">