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 input elements on the fly, adding wrapper divs if needed to support the method you choose to use.
Here is a YUI 3 implementation of rounded corners for a 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>
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.
.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;
}
Of course, the styles for the tl, tr, bl, br and even the roundMyCornersOuterDiv classes could be set via JavaScript. I left them in the CSS here for clarity.
Note that if you want to change all the 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.
One other note: since 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.
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 divs. Your mileage may vary.