/ Published in: HTML
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <style> body{ font-family:Arial, Helvetica, sans-serif; font-size: 13px; } .content, .contentA{ padding:10px; width:370px } .left{ width:150px; float:left; padding:7px 0px 0px 7px; min-height:24px; } .right{ width:200px; float:left; padding:5px; min-height:24px; } .clear{ float:none; clear:both; height:0px; } .row{ background-color:none; display:block; min-height:32px; } .text{ width:190px; } .ruler{ width:400px; border-bottom:dashed 1px #dcdcdc; } tr:focus{ background-color:#fcfcf0; } td{ vertical-align:top; } .over{ background-color:#e6e2af; } .out{ background-color:none; } } </style> <script> $(document).ready(function() { $('.content .left, .content input, .content textarea, .content select').focus(function(){ $(this).parents('.content').addClass("over"); }).blur(function(){ $(this).parents('.content').removeClass("over"); }); $('.contentA .left, .contentA input, .contentA textarea, .contentA select').focus(function(){ $(this).parents('.row').addClass("over"); }).blur(function(){ $(this).parents('.row').removeClass("over"); }); }); </script> </head> <body> <form method="post"> <div style="float:left; margin-right:20px; width:400px;"> <div class="contentA"> <div class="row"> </div> <div class="row"> </div> <div class="row"> </div> <div class="row"> </div> </div> <hr /> <div class="contentA"> <div class="row"> </div> <div class="row"> </div> <div class="row"> </div> <div class="row"> </div> </div> <hr /> <div class="contentA"> <div class="row"> <div class="right"> <input checked="checked" name="Radio1" type="radio" />Basic (Free registration) <br /> <input checked="checked" name="Radio1" type="radio" />Pro 9.99$ <br /> <input checked="checked" name="Radio1" type="radio" />Expert 19.99$ </div> </div> <div class="row"> </div> </div> <input name="Button1" type="button" value="Do some action" /> </div> <div style="float:left; margin-right:20px;"> <div class="content"> <div class="row"> </div> <div class="row"> </div> <div class="row"> </div> <div class="row"> </div> </div> <hr /> <div class="content"> <div class="row"> </div> <div class="row"> </div> <div class="row"> </div> <div class="row"> </div> </div> <hr /> <div class="content"> <div class="row"> <div class="right"> <input checked="checked" name="Radio1" type="radio" />Basic (Free registration) <br /> <input checked="checked" name="Radio1" type="radio" />Pro 9.99$ <br /> <input checked="checked" name="Radio1" type="radio" />Expert 19.99$ </div> </div> <div class="row"> </div> </div> <input name="Button1" type="button" value="Do some action" /> </div> </form> </body> </html>