form.css

Same filename in this branch
  1. 8.9.x core/profiles/demo_umami/themes/umami/css/classy/components/form.css
  2. 8.9.x core/themes/seven/css/classy/components/form.css
  3. 8.9.x core/themes/claro/css/components/form.css
  4. 8.9.x core/themes/bartik/css/components/form.css
  5. 8.9.x core/themes/bartik/css/classy/components/form.css
  6. 8.9.x core/themes/classy/css/components/form.css
Same filename in other branches
  1. 9 core/profiles/demo_umami/themes/umami/css/classy/components/form.css
  2. 9 core/themes/olivero/css/components/form.css
  3. 9 core/themes/seven/css/components/form.css
  4. 9 core/themes/seven/css/classy/components/form.css
  5. 9 core/themes/claro/css/components/form.css
  6. 9 core/themes/bartik/css/components/form.css
  7. 9 core/themes/bartik/css/classy/components/form.css
  8. 9 core/themes/starterkit_theme/css/components/form.css
  9. 9 core/themes/classy/css/components/form.css
  10. 10 core/profiles/demo_umami/themes/umami/css/components/forms/form.css
  11. 10 core/misc/dialog/off-canvas/css/form.css
  12. 10 core/themes/olivero/css/components/form.css
  13. 10 core/themes/claro/css/components/form.css
  14. 10 core/themes/starterkit_theme/css/components/form.css
  15. 11.x core/profiles/demo_umami/themes/umami/css/components/forms/form.css
  16. 11.x core/misc/dialog/off-canvas/css/form.css
  17. 11.x core/themes/olivero/css/components/form.css
  18. 11.x core/themes/claro/css/components/form.css
  19. 11.x core/themes/starterkit_theme/css/components/form.css
/**
 * Form elements.
 */
form {
  margin: 0;
  padding: 0;
}
fieldset:not(.fieldgroup) {
  position: relative;
  min-width: 0;
  margin: 1em 0;
  padding: 30px 18px 18px;
  border-radius: 2px;
  background-color: #fcfcfa;
}
fieldset:not(.fieldgroup) > legend {
  position: absolute;
  top: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 1em;
  font-weight: bold;
}
.fieldgroup {
  min-width: 0;
}
.form-item {
  margin: 0.75em 0;
}
/**
 * When a table row has a single form item, prevent it from adding unnecessary
 * extra spacing. If it has multiple form items, allow spacing between them,
 * overriding Classy.
 */
tr.odd .form-item,
tr.even .form-item {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
td > .form-item:only-child {
  margin-top: 0;
  margin-bottom: 0;
}
.form-type-checkbox {
  padding: 0;
}
label {
  display: table;
  margin: 0 0 0.1em;
  padding: 0;
  font-weight: bold;
}
label.error {
  color: #a51b00;
}
label[for] {
  cursor: pointer;
}
.form-item label.option {
  text-transform: none;
}
.form-item label.option input {
  vertical-align: middle;
}
.form-disabled label {
  color: #686868;
}
.form-disabled input.form-date,
.form-disabled input.form-text,
.form-disabled input.form-tel,
.form-disabled input.form-time,
.form-disabled input.form-email,
.form-disabled input.form-url,
.form-disabled input.form-search,
.form-disabled input.form-number,
.form-disabled input.form-color,
.form-disabled input.form-file,
.form-disabled textarea.form-textarea,
.form-disabled select.form-select {
  border-color: #d4d4d4;
  background-color: hsla(0, 0%, 0%, 0.08);
  box-shadow: none;
}
.form-item input.error,
.form-item textarea.error,
.form-item select.error {
  color: #a51b00;
  border-width: 1px;
  border-color: #e62600;
  background-color: hsla(15, 75%, 97%, 1);
  box-shadow: inset 0 5px 5px -5px #b8b8b8;
}
.form-item textarea.error + .cke {
  border-width: 1px;
  border-color: #e62600;
}
.form-item input.error:focus,
.form-item textarea.error:focus,
.form-item select.error:focus {
  border-color: #e62600;
  outline: 0;
  background-color: #fcf4f2;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px 1px #e62600;
}
.form-required:after {
  width: 7px;
  height: 7px;
  background-size: 7px 7px;
}
.form-item--error-message {
  margin-top: 0.15em;
  color: #e32700;
}
.fieldset-wrapper > .form-item--error-message {
  margin-top: 0;
}
.text-format-wrapper .form-item--error-message {
  margin: 0;
  padding: 0.25em 0.666em 0;
  border: solid #ccc;
  border-width: 0 1px;
}

/* Filter */
ul.tips,
div.description,
.form-item .description {
  margin: 0.2em 0 0 0;
  color: #595959;
  font-size: 0.95em;
}
.form-item .description.error {
  margin-top: 0;
  color: #a51b00;
}

ul.tips li {
  margin: 0.25em 0 0.25em 1.5em; /* LTR */
}
[dir="rtl"] ul.tips li {
  margin: 0.25em 1.5em 0.25em 0;
}
.form-type-radio .description,
.form-type-checkbox .description {
  margin-left: 1.5em; /* LTR */
}
[dir="rtl"] .form-type-radio .description,
[dir="rtl"] .form-type-checkbox .description {
  margin-right: 1.5em;
  margin-left: 0;
}
.form-text,
.form-textarea {
  border-radius: 2px;
  font-size: 1em;
  line-height: normal;
}

input.form-autocomplete,
input.form-text,
input.form-tel,
input.form-email,
input.form-url,
input.form-search,
input.form-number,
input.form-color,
input.form-file,
input.form-date,
input.form-time,
textarea.form-textarea {
  box-sizing: border-box;
  max-width: 100%;
  padding: 0.3em 0.4em 0.3em 0.5em; /* LTR */
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  transition: border linear 0.2s, box-shadow linear 0.2s;
  color: #595959;
  border: 1px solid #b8b8b8;
  border-top-color: #999;
  border-radius: 2px;
  background: #fcfcfa;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125);
  font-size: 1em;
}
[dir="rtl"] textarea.form-textarea {
  padding: 0.3em 0.5em 0.3em 0.4em;
}
.form-text:focus,
.form-tel:focus,
.form-email:focus,
.form-url:focus,
.form-search:focus,
.form-number:focus,
.form-color:focus,
.form-file:focus,
.form-textarea:focus,
.form-date:focus,
.form-time:focus {
  border-color: #40b6ff;
  outline: 0;
  background-color: #fff;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px #40b6ff;
}

.confirm-parent,
.password-parent {
  overflow: visible;
  width: auto;
}

.form-item-options-group-info-identifier,
.form-item-pass .description {
  clear: both;
}

/**
 * Limits extra long instances of select elements to the max width allowed
 * to avoid breaking layouts.
 */
select {
  max-width: 100%;
}

/**
 * Select elements - Webkit only
 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  select {
    padding: 1px 1.571em 1px 0.5em; /* LTR */
    cursor: pointer;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
    border: 1px solid #a6a6a6;
    border-radius: 0.143em;
    background:
      url(../../../../misc/icons/333333/caret-down.svg) no-repeat 99% 63%,
      -webkit-linear-gradient(top, #f6f6f3, #e7e7df); /* LTR */

    text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
    font-size: 0.875rem;
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
  }
  [dir="rtl"] select {
    padding: 1px 0.714em 1px 1.571em;
    background-position: 1% 63%, 0 0;
  }
  select:focus,
  select:hover {
    color: #1a1a1a;
    background-image:
      url(../../../../misc/icons/333333/caret-down.svg),
      -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
  }
  select:hover {
    box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
  }
}

/**
 * Improve spacing of cancel link.
 */
#edit-cancel {
  margin-left: 10px; /* LTR */
}
[dir="rtl"] #edit-cancel {
  margin-right: 10px;
  margin-left: 0;
}

/**
 * Improve form element usability on narrow devices.
 */
@media screen and (max-width: 600px) {
  input.form-autocomplete,
  input.form-text,
  input.form-tel,
  input.form-email,
  input.form-url,
  input.form-search,
  input.form-number,
  input.form-color,
  input.form-file,
  textarea.form-textarea {
    width: 100%;
    font-size: 1.2em;
    line-height: 1.2em;
  }
  input.form-number {
    width: auto;
  }
  .form-actions input,
  .form-wrapper input[type="submit"] {
    float: none;
    width: 100%;
    margin-top: 10px;
    margin-right: 0;
    margin-left: 0;
    padding-bottom: 6px;
  }
  .form-actions input:first-child,
  .form-wrapper input[type="submit"]:first-child {
    margin-top: 0;
  }
  details summary {
    overflow: hidden;
    box-sizing: border-box;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .password-strength {
    width: 100%;
  }
  div.form-item div.password-suggestions {
    float: none;
  }
  #dblog-filter-form .form-actions {
    float: none;
    padding: 0;
  }
  #edit-cancel {
    display: block;
    margin: 10px 0 0 0;
  }
  select {
    width: 100%;
  }
}

/* Exceptions */
#diff-inline-form select,
div.filter-options select {
  padding: 0;
}

File

core/themes/seven/css/components/form.css

View source 
  1. /**

  2.  * Form elements.

  3.  */

  4. form {

  5.   margin: 0;

  6.   padding: 0;

  7. }

  8. fieldset:not(.fieldgroup) {

  9.   position: relative;

  10.   min-width: 0;

  11.   margin: 1em 0;

  12.   padding: 30px 18px 18px;

  13.   border-radius: 2px;

  14.   background-color: #fcfcfa;

  15. }

  16. fieldset:not(.fieldgroup) > legend {

  17.   position: absolute;

  18.   top: 10px;

  19.   letter-spacing: 0.08em;

  20.   text-transform: uppercase;

  21.   font-size: 1em;

  22.   font-weight: bold;

  23. }

  24. .fieldgroup {

  25.   min-width: 0;

  26. }

  27. .form-item {

  28.   margin: 0.75em 0;

  29. }

  30. /**

  31.  * When a table row has a single form item, prevent it from adding unnecessary

  32.  * extra spacing. If it has multiple form items, allow spacing between them,

  33.  * overriding Classy.

  34.  */

  35. tr.odd .form-item,

  36. tr.even .form-item {

  37.   margin-top: 0.75em;

  38.   margin-bottom: 0.75em;

  39. }

  40. td > .form-item:only-child {

  41.   margin-top: 0;

  42.   margin-bottom: 0;

  43. }

  44. .form-type-checkbox {

  45.   padding: 0;

  46. }

  47. label {

  48.   display: table;

  49.   margin: 0 0 0.1em;

  50.   padding: 0;

  51.   font-weight: bold;

  52. }

  53. label.error {

  54.   color: #a51b00;

  55. }

  56. label[for] {

  57.   cursor: pointer;

  58. }

  59. .form-item label.option {

  60.   text-transform: none;

  61. }

  62. .form-item label.option input {

  63.   vertical-align: middle;

  64. }

  65. .form-disabled label {

  66.   color: #686868;

  67. }

  68. .form-disabled input.form-date,

  69. .form-disabled input.form-text,

  70. .form-disabled input.form-tel,

  71. .form-disabled input.form-time,

  72. .form-disabled input.form-email,

  73. .form-disabled input.form-url,

  74. .form-disabled input.form-search,

  75. .form-disabled input.form-number,

  76. .form-disabled input.form-color,

  77. .form-disabled input.form-file,

  78. .form-disabled textarea.form-textarea,

  79. .form-disabled select.form-select {

  80.   border-color: #d4d4d4;

  81.   background-color: hsla(0, 0%, 0%, 0.08);

  82.   box-shadow: none;

  83. }

  84. .form-item input.error,

  85. .form-item textarea.error,

  86. .form-item select.error {

  87.   color: #a51b00;

  88.   border-width: 1px;

  89.   border-color: #e62600;

  90.   background-color: hsla(15, 75%, 97%, 1);

  91.   box-shadow: inset 0 5px 5px -5px #b8b8b8;

  92. }

  93. .form-item textarea.error + .cke {

  94.   border-width: 1px;

  95.   border-color: #e62600;

  96. }

  97. .form-item input.error:focus,

  98. .form-item textarea.error:focus,

  99. .form-item select.error:focus {

  100.   border-color: #e62600;

  101.   outline: 0;

  102.   background-color: #fcf4f2;

  103.   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px 1px #e62600;

  104. }

  105. .form-required:after {

  106.   width: 7px;

  107.   height: 7px;

  108.   background-size: 7px 7px;

  109. }

  110. .form-item--error-message {

  111.   margin-top: 0.15em;

  112.   color: #e32700;

  113. }

  114. .fieldset-wrapper > .form-item--error-message {

  115.   margin-top: 0;

  116. }

  117. .text-format-wrapper .form-item--error-message {

  118.   margin: 0;

  119.   padding: 0.25em 0.666em 0;

  120.   border: solid #ccc;

  121.   border-width: 0 1px;

  122. }

  123. 

  124. /* Filter */

  125. ul.tips,

  126. div.description,

  127. .form-item .description {

  128.   margin: 0.2em 0 0 0;

  129.   color: #595959;

  130.   font-size: 0.95em;

  131. }

  132. .form-item .description.error {

  133.   margin-top: 0;

  134.   color: #a51b00;

  135. }

  136. 

  137. ul.tips li {

  138.   margin: 0.25em 0 0.25em 1.5em; /* LTR */

  139. }

  140. [dir="rtl"] ul.tips li {

  141.   margin: 0.25em 1.5em 0.25em 0;

  142. }

  143. .form-type-radio .description,

  144. .form-type-checkbox .description {

  145.   margin-left: 1.5em; /* LTR */

  146. }

  147. [dir="rtl"] .form-type-radio .description,

  148. [dir="rtl"] .form-type-checkbox .description {

  149.   margin-right: 1.5em;

  150.   margin-left: 0;

  151. }

  152. .form-text,

  153. .form-textarea {

  154.   border-radius: 2px;

  155.   font-size: 1em;

  156.   line-height: normal;

  157. }

  158. 

  159. input.form-autocomplete,

  160. input.form-text,

  161. input.form-tel,

  162. input.form-email,

  163. input.form-url,

  164. input.form-search,

  165. input.form-number,

  166. input.form-color,

  167. input.form-file,

  168. input.form-date,

  169. input.form-time,

  170. textarea.form-textarea {

  171.   box-sizing: border-box;

  172.   max-width: 100%;

  173.   padding: 0.3em 0.4em 0.3em 0.5em; /* LTR */

  174.   -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;

  175.   transition: border linear 0.2s, box-shadow linear 0.2s;

  176.   color: #595959;

  177.   border: 1px solid #b8b8b8;

  178.   border-top-color: #999;

  179.   border-radius: 2px;

  180.   background: #fcfcfa;

  181.   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125);

  182.   font-size: 1em;

  183. }

  184. [dir="rtl"] textarea.form-textarea {

  185.   padding: 0.3em 0.5em 0.3em 0.4em;

  186. }

  187. .form-text:focus,

  188. .form-tel:focus,

  189. .form-email:focus,

  190. .form-url:focus,

  191. .form-search:focus,

  192. .form-number:focus,

  193. .form-color:focus,

  194. .form-file:focus,

  195. .form-textarea:focus,

  196. .form-date:focus,

  197. .form-time:focus {

  198.   border-color: #40b6ff;

  199.   outline: 0;

  200.   background-color: #fff;

  201.   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px #40b6ff;

  202. }

  203. 

  204. .confirm-parent,

  205. .password-parent {

  206.   overflow: visible;

  207.   width: auto;

  208. }

  209. 

  210. .form-item-options-group-info-identifier,

  211. .form-item-pass .description {

  212.   clear: both;

  213. }

  214. 

  215. /**

  216.  * Limits extra long instances of select elements to the max width allowed

  217.  * to avoid breaking layouts.

  218.  */

  219. select {

  220.   max-width: 100%;

  221. }

  222. 

  223. /**

  224.  * Select elements - Webkit only

  225.  */

  226. @media screen and (-webkit-min-device-pixel-ratio: 0) {

  227.   select {

  228.     padding: 1px 1.571em 1px 0.5em; /* LTR */

  229.     cursor: pointer;

  230.     -webkit-transition: all 0.1s;

  231.     transition: all 0.1s;

  232.     border: 1px solid #a6a6a6;

  233.     border-radius: 0.143em;

  234.     background:

  235.       url(../../../../misc/icons/333333/caret-down.svg) no-repeat 99% 63%,

  236.       -webkit-linear-gradient(top, #f6f6f3, #e7e7df); /* LTR */

  237. 

  238.     text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);

  239.     font-size: 0.875rem;

  240.     -webkit-appearance: none;

  241.     -webkit-font-smoothing: antialiased;

  242.   }

  243.   [dir="rtl"] select {

  244.     padding: 1px 0.714em 1px 1.571em;

  245.     background-position: 1% 63%, 0 0;

  246.   }

  247.   select:focus,

  248.   select:hover {

  249.     color: #1a1a1a;

  250.     background-image:

  251.       url(../../../../misc/icons/333333/caret-down.svg),

  252.       -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);

  253.   }

  254.   select:hover {

  255.     box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);

  256.   }

  257. }

  258. 

  259. /**

  260.  * Improve spacing of cancel link.

  261.  */

  262. #edit-cancel {

  263.   margin-left: 10px; /* LTR */

  264. }

  265. [dir="rtl"] #edit-cancel {

  266.   margin-right: 10px;

  267.   margin-left: 0;

  268. }

  269. 

  270. /**

  271.  * Improve form element usability on narrow devices.

  272.  */

  273. @media screen and (max-width: 600px) {

  274.   input.form-autocomplete,

  275.   input.form-text,

  276.   input.form-tel,

  277.   input.form-email,

  278.   input.form-url,

  279.   input.form-search,

  280.   input.form-number,

  281.   input.form-color,

  282.   input.form-file,

  283.   textarea.form-textarea {

  284.     width: 100%;

  285.     font-size: 1.2em;

  286.     line-height: 1.2em;

  287.   }

  288.   input.form-number {

  289.     width: auto;

  290.   }

  291.   .form-actions input,

  292.   .form-wrapper input[type="submit"] {

  293.     float: none;

  294.     width: 100%;

  295.     margin-top: 10px;

  296.     margin-right: 0;

  297.     margin-left: 0;

  298.     padding-bottom: 6px;

  299.   }

  300.   .form-actions input:first-child,

  301.   .form-wrapper input[type="submit"]:first-child {

  302.     margin-top: 0;

  303.   }

  304.   details summary {

  305.     overflow: hidden;

  306.     box-sizing: border-box;

  307.     white-space: nowrap;

  308.     text-overflow: ellipsis;

  309.   }

  310.   .password-strength {

  311.     width: 100%;

  312.   }

  313.   div.form-item div.password-suggestions {

  314.     float: none;

  315.   }

  316.   #dblog-filter-form .form-actions {

  317.     float: none;

  318.     padding: 0;

  319.   }

  320.   #edit-cancel {

  321.     display: block;

  322.     margin: 10px 0 0 0;

  323.   }

  324.   select {

  325.     width: 100%;

  326.   }

  327. }

  328. 

  329. /* Exceptions */

  330. #diff-inline-form select,

  331. div.filter-options select {

  332.   padding: 0;

  333. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.