There 多种技术制作跨浏览器圆角 http://www.infernodevelopment.com/5-methods-css-curvy-corners，YUI当然可以用来转换input动态元素，添加包装div如果需要支持您选择使用的方法。
这里有一个YUI 3 http://developer.yahoo.com/yui/3/实现圆角text-type input，使用角点的背景图像：
<html>
<head>
<title>Stack Overflow 1471254</title>
<link rel="stylesheet" type="text/css" href="roundMyCorners.css">
<script type="text/javascript" src="http://yui.yahooapis.com/3.0.0b1/build/yui/yui-min.js"></script>
</head>
<body>
<p>Here is an input box: <input type="text" value="type stuff" class="roundMyCorners"> Thanks!</p>
<script type="text/javascript">
YUI({combine: true, timeout: 10000}).use("node", function(Y) {
Y.all('body input.roundMyCorners').each(function(rcInput) {
var outerDiv = Y.Node.create('<div class="roundMyCornersOuterDiv"></div>');
outerDiv.appendChild(Y.Node.create('<div class="tl"></div>'));
outerDiv.appendChild(Y.Node.create('<div class="tr"></div>'));
outerDiv.appendChild(rcInput.cloneNode());
outerDiv.appendChild(Y.Node.create('<div class="bl"></div>'));
outerDiv.appendChild(Y.Node.create('<div class="br"></div>'));
rcInput.get('parentNode').replaceChild( outerDiv, rcInput );
});
});
</script>
</body>
</html>
这是 CSS 文件。出于演示目的，我（有点粗鲁地）从一个有圆角演示的网站 http://www.bestinclass.com/blog/2008/css3-border-radius-rounded-corners-ie/在这段代码中。当然，最好为您的网站制作自己的图像。
.roundMyCorners {
width: 12em;
border: none;
font-weight: bold;
color: white;
background-color: #3f6daf;
}
.roundMyCornersOuterDiv {
position: relative;
display: -moz-inline-stack; /* inline-block for older Gecko */
display: inline-block;
*zoom: 1; /* force hasLayout for IE */
*display: inline; /* rendered as inline-block in IE after hasLayout */
vertical-align: middle;
padding: 6px;
color: white;
background-color: #3f6daf;
}
.roundMyCornersOuterDiv .tl {
position: absolute;
width: 6px;
height: 6px;
background: url(http://www.bestinclass.com/images/ui/rounded/colhead-tl.png) top left no-repeat;
top: 0;
left: 0;
}
.roundMyCornersOuterDiv .tr {
position: absolute;
width: 6px;
height: 6px;
background: url(http://www.bestinclass.com/images/ui/rounded/colhead-tr.png) top right no-repeat;
top: 0;
right: 0;
}
.roundMyCornersOuterDiv .bl {
position: absolute;
width: 6px;
height: 6px;
background: url(http://www.bestinclass.com/images/ui/rounded/colhead-bl.png) bottom left no-repeat;
bottom: 0;
left: 0;
}
.roundMyCornersOuterDiv .br {
position: absolute;
width: 6px;
height: 6px;
background: url(http://www.bestinclass.com/images/ui/rounded/colhead-br.png) bottom right no-repeat;
bottom: 0;
right: 0;
}
当然，风格tl, tr, bl, br甚至是roundMyCornersOuterDiv类可以通过 JavaScript 设置。为了清楚起见，我将它们留在了 CSS 中。
请注意，如果您想更改all the input元素，您只需将初始选择器从 ' 更改为body input.roundMyCorners' to 'input'。但是，我不希望这能很好地工作checkbox and radio种类input，所以也许 'input[type="text"]如果您想避免到处标记类名，' 是一个更好的选择器。
另一项说明：自从input是一个内联元素，我想要包装器div to be inline-block。这对于无表格布局的流行技术 http://www.cssdrive.com/index.php/examples/exampleitem/tableless_forms/P20/。不幸的是，这需要一些专有的调整。
最后，如果您不想为 CSS 烦恼或维护自己的 YUI/jQuery/任何代码，您可以尝试漂亮的角落 http://www.html.it/articoli/nifty/index.html or 弯曲的角落 http://www.curvycorners.net/，这些 JavaScript 库声称可以自动执行此类操作，至少对于divs。你的旅费可能会改变。
