Geek Answers Handbook

Rounded input fields with YUI

Is it possible to use YUI to change all input fields to have rounded corners? I cannot use the background image, since the inputs will be of variable width, and I cannot add divs wrapped around them, because some input elements are generated. Also, I can’t use the border radius or any moz / webkit modification, since it should look the same in IE6.

Any pointers appreciated, thanks.

+4
source share
2 answers

There are several methods for creating cross-browser rounded corners , and YUI can certainly be used to convert input elements on the fly by adding a wrapper div , if necessary, to support the method you decide to use.

Here is the YUI 3 implementation of rounded corners for text -type input using background images for corners:

 <html> <head> <title>Qaru 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 is the CSS file. For demonstration purposes, I (somewhat roughly) hotlink PNG from a site where there is a rounded demogram in this code . Of course, it is preferable to create 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, styles for the tl , tr , bl , br and even roundMyCornersOuterDiv can be set using JavaScript. I left them in CSS here for clarity.

Note that if you want to change all input elements, you simply change the initial selector from ' body input.roundMyCorners ' to ' input '. However, I do not expect this to work well for checkbox and radio input types, so perhaps " input[type="text"] " is the best selector if you want to avoid stamping class names around the world.

One more note: since input is an inline element, I wanted the div wrapper to be inline-block . This is important for popular methods for tabular layout forms . Unfortunately, this required several proprietary settings.

Finally, if you don't want to fuss with CSS or maintain your own YUI / jQuery / other code, you can try Nifty Corners or Curvy Corners , which are JavaScript libraries that claim to do this automatically, at least for div s. Your mileage may vary.

+3
source

Perhaps a selector to find the inputs and then replace them with divs around the inputs?

0
source

More articles:


All Articles