CSS 圆角 <input type='text' /> 使用 IE 的 border-radius.htc
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3274950/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rounded corners for <input type='text' /> using border-radius.htc for IE
提问by Sir Hally
I want to create an input fields with rounded corners.
我想创建一个带圆角的输入字段。
HTML:
HTML：
<div id="RightColumn">
<input type="text" class="inputForm" />
</div>
CSS:
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;
}
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.
但是 IE 不显示输入字段的任何边框 - 更近的圆形或简单的边框。当我删除 #RightColumn 的 CSS 样式时，IE 显示带有圆角的输入字段。但我需要#RightColumn 的背景。
How can I create it?
我怎样才能创建它？
回答by hollsk
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.
哦，上帝，不要这样。出于性能和清晰度的原因，HTC 文件从来都不是一个好主意，并且您使用了太多特定于供应商的参数来实现跨浏览器一直到 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.
将背景图像应用到带有圆角的输入字段，并使该字段的背景颜色透明，而使用 border:none 代替。
回答by pancho
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;
...Who cares IE6 we are in 2011 upgrade and wake up please!
...谁在乎 IE6 我们在 2011 升级，请醒醒！
回答by Raja Manickam
if you are using for certain text field then use the class
如果您正在使用某些文本字段，则使用该类
<style>
.inputForm{
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
</style>
and in html code use
并在 html 代码中使用
<input type="text" class="inputForm">
or if u want to do this for all the input type text field means use
或者，如果您想对所有输入类型文本字段执行此操作，请使用
<style>
input[type="text"]{
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
</style>
and in html code
并在 html 代码中
<input type="text" name="name">
回答by Sarfraz
回答by Adrien Be
W3C doc says regarding "border-radius" property: "supported in IE9+, Firefox, Chrome, Safari, and Opera".
W3C 文档说关于“border-radius”属性：“在 IE9+、Firefox、Chrome、Safari 和 Opera 中支持”。
Hence I assume you're testing on IE8 or below.
因此，我假设您正在 IE8 或更低版本上进行测试。
For "regular elements" there is a solution compatible with IE8 & other old/poor browsers. See below.
对于“常规元素”，有一个与 IE8 和其他旧/差浏览器兼容的解决方案。见下文。
HTML:
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:
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;
}
You need to create both roundedCorner_right.png& roundedCorner_left.png. These are work around for IE8 (& below) to fake the rounded corner feature.
您需要同时创建roundedCorner_right.png和roundedCorner_left.png。这些是 IE8（及以下）伪造圆角功能的解决方法。
So in this example above we apply the left rounded corner to the first span element in the containing div, & we apply the right rounded corner to the containing div. These images overlap the browser-provided "squary corners" & give the illusion of being part of a rounded element.
所以在上面的这个例子中，我们将左圆角应用于包含 div 中的第一个 span 元素，我们将右圆角应用于包含 div。这些图像与浏览器提供的“方角”重叠，并给人一种成为圆形元素一部分的错觉。
The idea for inputs would be to do the same logic. However, input is an empty element, " element is empty, it contains attributes only", in other word, you cannot wrap a span into an inputsuch as <input><span class="myCoolItem"></span></input>to then use background images like in the previous example.
输入的想法是做同样的逻辑。然而，输入是一个空元素，“元素是空的，它只包含属性”，换句话说，你不能将一个跨度包装到一个输入中<input><span class="myCoolItem"></span></input>，然后像前面的例子那样使用背景图像。
Hence the solution seems to be to do the opposite: wrap the input into another element. see this answer rounded corners of input elements in IE
回答by jolt
Writing from phone, but curvycorners is really good, since it adds it's own borders only if browser doesn't support it by default. In other words, browsers which already support some CSS3 will use their own system to provide corners.
https://code.google.com/p/curvycorners/
用手机写，但是curvycorners真的很好，因为它只有在浏览器默认不支持的情况下才会添加自己的边框。换句话说，已经支持一些 CSS3 的浏览器会使用自己的系统来提供角点。
https://code.google.com/p/curvycorners/
