Advanced Search

Expanding form with rounded corners

/ Published in: HTML
Save to your folder(s)
A simple form with rounded corners, and hopefully not too much markup. You'll need some kind of graphic for the corners of course - I used 20px corners for this.

It's a bit rough, would love to know what some other people think.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style>
  2. form {
  3.   background: #E2EEE7;
  4.   float: left;
  5.   margin-bottom: 2em;
  6.   padding: 0.7em;
  7.   position: relative;
  8.   width: 97.6%;
  9. }
  10.  
  11. #main form h2 {  
  12.   font-size: 1.8em;
  13.   margin: 0 0 1em 0;
  14. }
  15.  
  16. form fieldset {
  17.   background: white;
  18.   width: 34.9em;
  19. }
  20.  
  21. form div {
  22.   background: white;
  23.   clear: both;
  24.   float: left;
  25.   font-size: 1.4em;
  26.   line-height: 1.2;
  27.   padding: 1em 1em 1em 0.8em;
  28.   width: 93%;
  29. }
  30.  
  31. fieldset#control div:first-child {
  32.   background: transparent url(/images/search-top-left-corner.png) no-repeat scroll left top; 
  33.   padding-bottom: 0.2em;
  34. }
  35.  
  36. form fieldset#control {
  37.  background: white url(/images/search-top-right-corner.png) no-repeat scroll right top; 
  38. }
  39.  
  40. form fieldset div + div {
  41.  background: transparent url(/images/search-bottom-right-corner.png) no-repeat scroll right bottom;
  42. }
  43.  
  44. form fieldset#submit div {
  45.   background: transparent url(/images/search-bottom-left-corner.png) no-repeat scroll left bottom;
  46.   padding-left: 1.7em;
  47. }
  48.  
  49. form fieldset#submit {
  50.   background: white url(/images/search-bottom-right-corner.png) no-repeat scroll right bottom;
  51.   width: 17em;
  52. }
  53.  
  54. form label {
  55.   color: #4E1A00;
  56.   font-weight: bold;
  57.   font-size: 1.4em;
  58.   margin-bottom: 0.5em;
  59.   width: 17em;
  60. }
  61.  
  62. form select {
  63.   font-size: 1em;
  64.   width: 20em;
  65. }
  66.  
  67. form input {
  68.   font-size: 1em;
  69. }
  70.  
  71. form #result {
  72.   background: #FEFF9E;
  73.   color: #328602;
  74.   display: block;
  75.   font-size: 1.2em;
  76.   margin: 1em;
  77.   padding: 0.4em;
  78. }
  79.  
  80. form p#help {
  81.   background: white;
  82.   border-bottom: 1px solid #C1D6C8;
  83.   border-right: 1px solid #C1D6C8;
  84.   font-size: 1.2em;
  85.   line-height:1.8;
  86.   padding: 1em; 
  87.   position: absolute;
  88.   right: 10px;
  89.   top: 50px;
  90.   width: 13em;
  91. }
  92.  
  93. </style>
  94.  
  95.   <form>
  96.     <h2>This is a really cool form</h2>
  97.     <fieldset id="control">
  98.         <div>
  99.           <label for="family">1.</label>
  100.           <select name="family" id="family" type="text" tabindex="1">
  101.             <option>Choose something</option>
  102.             <option>Option1</option>
  103.             <option>Option1</option>
  104.           </select>
  105.         </div> 
  106.         <div>
  107.           <label for="model">2.</label> 
  108.           <select name="model" id="model" tabindex="2">
  109.             <option>Choose something else</option> 
  110.             <option>Option1</option>
  111.             <option>Option2</option>
  112.            </select>
  113.           </div> 
  114.      </fieldset>
  115.      <fieldset id="submit">
  116.        <div>
  117.          <input type="submit" value="View Results" tabindex="3"/>
  118.        </div>
  119.      </fieldset>
  120.      <p id="help">
  121.       Can't find what you're looking for? <a href="#">Please let us know</a> - we're here to help!
  122.      </p>
  123.    </form>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.