Question

是否可以使用YUI将所有输入框更改为圆角？我不能使用背景图像，因为输入将是可变宽度，我不能添加包裹它们的div，因为生成了一些输入元素。此外，我不能使用border radius或任何moz / webkit变体，因为它需要在IE6中显示相同。

任何指示赞赏，谢谢。

Answer 1

有multiple techniques to make cross-browser rounded corners，YUI当然可以用于动态转换input元素，如果需要，可以添加包装div以支持您选择使用的方法。

以下为text - 类型input的圆角的YUI 3实现，使用角落的背景图片：

<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文件。出于演示目的，我（有点粗鲁）将此代码中的site that has a rounded corner demo的PNG链接起来。当然，最好为您的网站制作自己的图片。

.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;
}

当然，可以通过JavaScript设置tl，tr，bl，br甚至roundMyCornersOuterDiv类的样式。为了清楚起见，我把它们留在了CSS中。

请注意，如果您想更改所有 input元素，只需将初始选择器从“body input.roundMyCorners”更改为“input”即可。但是，我不希望这对checkbox和radio类型的input很好用，所以如果你想避免，'input[type="text"]'可能是更好的选择器在任何地方都盖章。

另一个注意事项：由于input是内联元素，因此我希望包装器div为inline-block。这对popular techniques for table-free form layouts至关重要。不幸的是，这需要一些专有的调整。

最后，如果您不想对CSS大惊小怪或维护自己的YUI / jQuery /任何代码，您可以尝试Nifty Corners或Curvy Corners，它们是声称要执行的JavaScript库这种事情是自动的，至少对于div来说。您的里程可能会有所不同。

Answer 2

可能是一个选择器来查找输入，然后用输入周围的div替换它们？

带YUI的圆形输入框

2 个答案: