form.css 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. /**
  2. * CSS styles for forms generated by yiic.
  3. *
  4. * The styles can be applied to the following form structure:
  5. *
  6. * <div class="form">
  7. * <div class="row">
  8. * <label for="inputid">xyz</label>
  9. * <input name="inputid" id="inputid" type="text" />
  10. * <p class="hint">hint text</p>
  11. * </div>
  12. * <div class="row">
  13. * <label for="inputid">xyz</label>
  14. * <input name="inputid" id="inputid" type="text" />
  15. * <p class="hint">hint text</p>
  16. * </div>
  17. * <div class="row buttons">
  18. * <label for="inputid">xyz</label>
  19. * <input name="inputid" id="inputid" type="text" />
  20. * <p class="hint">hint text</p>
  21. * </div>
  22. * </div>
  23. *
  24. * The above code will render the labels and input fields in separate lines.
  25. * In order to render them in the same line, please use the "wide" form as follows,
  26. *
  27. * <div class="wide form">
  28. * ......
  29. * </div>
  30. *
  31. * @author Qiang Xue <qiang.xue@gmail.com>
  32. * @link http://www.yiiframework.com/
  33. * @copyright 2008-2010 Yii Software LLC
  34. * @license http://www.yiiframework.com/license/
  35. */
  36. div.form
  37. {
  38. }
  39. div.form input,
  40. div.form textarea,
  41. div.form select
  42. {
  43. margin: 0.2em 0 0.5em 0;
  44. }
  45. div.form fieldset
  46. {
  47. border: 1px solid #DDD;
  48. padding: 10px;
  49. margin: 0 0 10px 0;
  50. -moz-border-radius:7px;
  51. }
  52. div.form label
  53. {
  54. font-weight: bold;
  55. font-size: 0.9em;
  56. display: block;
  57. }
  58. div.form .row
  59. {
  60. margin: 5px 0;
  61. }
  62. div.form .hint
  63. {
  64. margin: 0;
  65. padding: 0;
  66. color: #999;
  67. }
  68. div.form .note
  69. {
  70. font-style: italic;
  71. }
  72. div.form span.required
  73. {
  74. color: red;
  75. }
  76. div.form div.error label:first-child,
  77. div.form label.error,
  78. div.form span.error
  79. {
  80. color: #C00;
  81. }
  82. div.form div.error input,
  83. div.form div.error textarea,
  84. div.form div.error select,
  85. div.form input.error,
  86. div.form textarea.error,
  87. div.form select.error
  88. {
  89. background: #FEE;
  90. border-color: #C00;
  91. }
  92. div.form div.success input,
  93. div.form div.success textarea,
  94. div.form div.success select,
  95. div.form input.success,
  96. div.form textarea.success,
  97. div.form select.success
  98. {
  99. background: #E6EFC2;
  100. border-color: #C6D880;
  101. }
  102. div.form div.success label
  103. {
  104. color: inherit;
  105. }
  106. div.form .errorSummary
  107. {
  108. border: 2px solid #C00;
  109. padding: 7px 7px 12px 7px;
  110. margin: 0 0 20px 0;
  111. background: #FEE;
  112. font-size: 0.9em;
  113. }
  114. div.form .errorMessage
  115. {
  116. color: red;
  117. font-size: 0.9em;
  118. }
  119. div.form .errorSummary p
  120. {
  121. margin: 0;
  122. padding: 5px;
  123. }
  124. div.form .errorSummary ul
  125. {
  126. margin: 0;
  127. padding: 0 0 0 20px;
  128. }
  129. div.wide.form label
  130. {
  131. float: left;
  132. margin-right: 10px;
  133. position: relative;
  134. text-align: right;
  135. width: 100px;
  136. }
  137. div.wide.form .row
  138. {
  139. clear: left;
  140. }
  141. div.wide.form .buttons, div.wide.form .hint, div.wide.form .errorMessage
  142. {
  143. clear: left;
  144. padding-left: 110px;
  145. }