< input type ='text'/>的圆角使用border-radius.htc为IE [英] Rounded corners for <input type='text' /> using border-radius.htc for IE

问题描述

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

I want to create an input fields with rounded corners.

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的背景。

But IE doesn't show any borders for input fields - neighter rounded nor simple borders. When I remove CSS-style for #RightColumn, IE shows an input fields with rounded corners. But I need background for #RightColumn.

如何创建它？

推荐答案

哦主，不要这样做。 HTC文件从来不是一个好主意的性能和清晰度的原因，你使用太多供应商特定的参数的东西，可以很容易地完成跨浏览器一路回到IE6。

Oh lord, don't do it this way. HTC files are never a good idea for performance and clarity reasons, and you're using too many vendor-specific parameters for something that can easily be done cross-browser all the way back to IE6.

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

Apply a background image to your input field with the rounded corners and make the field's background colour transparent with border:none applied instead.

这是一个链接，详细介绍了这个人是怎么做的： http://pupungbp.erastica.com/css/rounded-corner-input-form/

Here is a link with more detail of how this guy did it: http://pupungbp.erastica.com/css/rounded-corner-input-form/

这篇关于< input type ='text'/>的圆角使用border-radius.htc为IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！