带YUI的圆角输入框 [英] Rounded input boxes with YUI
问题描述
是否可以使用YUI将所有输入框更改为圆角？我不能使用背景图像作为输入将是可变宽度，我不能添加包围它们，因为一些输入元素生成的div。此外，我不能使用边框半径或任何moz / webkit变体，因为它需要在IE6中出现相同。
任何指针赞赏，谢谢。
有多种技术使跨浏览器的圆角和YUI当然可以用于转换输入元素，添加包装
这里是 YUI 3 为文本 -type 输入实现圆角，使用角落的背景图片：
< html&
< head>
< title> Stack Overflow 1471254< / title>
< link rel =stylesheettype =text / csshref =roundMyCorners.css>
< script type =text / javascriptsrc =http://yui.yahooapis.com/3.0.0b1/build/yui/yui-min.js>< / script>
< / head>
< body>
< p>这里是一个输入框：< input type =textvalue =type stuffclass =roundMyCorners>谢谢！< / p>
< script type =text / javascript>
YUI（{combine：true，timeout：10000}）use（node，function（Y）{
Yall（'body input.roundMyCorners'）。 {
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 ，rcInput）;
}）;
}）;
< / script>
< / body>
< / html>
这是CSS文件。为了演示的目的，我（有些粗鲁地）将PNG与在此代码中有圆角模拟的网站。当然最好为您的网站制作自己的图片。
.roundMyCorners {
width：12em;
border：none;
font-weight：bold;
color：white;
background-color：＃3f6daf;
}
.roundMyCornersOuterDiv {
position：relative;
display：-moz-inline-stack; / * inline-block for old Gecko * /
display：inline-block;
* zoom：1; / * force hasLayout for IE * /
* display：inline; / *呈现为inline-block在IE后的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：0;
left：0;
}
.roundMyCornersOuterDiv .tr {
position：absolute;
width：6px;
height：6px;
background：url（http://www.bestinclass.com/images/ui/rounded/colhead-tr.png）右上角没有重复;
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：0;
left：0;
}
.roundMyCornersOuterDiv .br {
position：absolute;
width：6px;
height：6px;
background：url（http://www.bestinclass.com/images/ui/rounded/colhead-br.png）右下角没有重复;
bottom：0;
right：0;
}
当然， tl ， tr ， bl ， br 甚至 roundMyCornersOuterDiv 类都可以通过JavaScript设置。
请注意，如果您要更改全部， 另一个注意：由于 最后，如果你不想骗取CSS或维护自己的YUI / jQuery /无论什么代码，可以尝试 Nifty Corners 或 Curvy Corners ，这是JavaScript库声称自动执行这种事情，至少 Would it be possible to use YUI to change all my input boxes to have rounded corners? I cannot use a background image as the inputs will be variable width and I cannot add divs wrapped around them because some input elements are generated. Also I cannot use border radius or any moz/webkit variation as it needs to appear the same in IE6. Any pointers appreciated, thanks. There multiple techniques to make cross-browser rounded corners, and YUI can certainly be used to convert Here is a YUI 3 implementation of rounded corners for a Here's the CSS file. For demo purposes, I'm (somewhat rudely) hotlinking the PNGs from a site that has a rounded corner demo in this code. Of course it's preferable to make your own images for your site. Of course, the styles for the Note that if you want to change all the One other note: since Finally, if you don't want to fuss with the CSS or maintain your own YUI/jQuery/whatever code, you could try Nifty Corners or Curvy Corners, which are JavaScript libraries that claim to do this sort of thing automagically, at least for 这篇关于带YUI的圆角输入框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！输入 code>元素，只需将初始选择器从 body input.roundMyCorners '更改为输入 。但是，我不希望这对于复选框和无线电类型的输入，因此，如果你想避免在任何地方标记类名，或许 input [type =text] '是一个更好的选择器。 p>
输入是一个内联元素，我想要包装器 div 为 inline-block 。这对于用于无表单表单布局的常用技术非常重要。。不幸的是，这需要一些专有的调整。
div s。您的里程可能不同。input elements on the fly, adding wrapper divs if needed to support the method you choose to use.text-type input, using background images for the corners:<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>
.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 and even the roundMyCornersOuterDiv classes could be set via JavaScript. I left them in the CSS here for clarity.input elements, you just change the initial selector from 'body input.roundMyCorners' to 'input'. However, I don't expect this to work nicely for checkbox and radio types of input, so perhaps 'input[type="text"]' is a better selector, if you want to avoid stamping class names everywhere.input is an inline element, I wanted the wrapper div to be inline-block. This is essential for popular techniques for table-free form layouts. Unfortunately, this required a couple of proprietary tweaks.divs. Your mileage may vary.
