Posted By

superdeluxesam on 02/05/09


Tagged

form css html xhtml layout design


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

vali29
michellebracken


Expanding form with rounded corners


 / Published in: HTML
 

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.

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

Report this snippet  

You need to login to post a comment.