form.css

Same filename in this branch
  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/classy/components/form.css
  4. 9 core/themes/claro/css/components/form.css
  5. 9 core/themes/bartik/css/components/form.css
  6. 9 core/themes/bartik/css/classy/components/form.css
  7. 9 core/themes/starterkit_theme/css/components/form.css
  8. 9 core/themes/classy/css/components/form.css
Same filename in other branches
  1. 8.9.x core/profiles/demo_umami/themes/umami/css/classy/components/form.css
  2. 8.9.x core/themes/seven/css/components/form.css
  3. 8.9.x core/themes/seven/css/classy/components/form.css
  4. 8.9.x core/themes/claro/css/components/form.css
  5. 8.9.x core/themes/bartik/css/components/form.css
  6. 8.9.x core/themes/bartik/css/classy/components/form.css
  7. 8.9.x core/themes/classy/css/components/form.css
  8. 10 core/profiles/demo_umami/themes/umami/css/components/forms/form.css
  9. 10 core/misc/dialog/off-canvas/css/form.css
  10. 10 core/themes/olivero/css/components/form.css
  11. 10 core/themes/claro/css/components/form.css
  12. 10 core/themes/starterkit_theme/css/components/form.css
  13. 11.x core/profiles/demo_umami/themes/umami/css/components/forms/form.css
  14. 11.x core/misc/dialog/off-canvas/css/form.css
  15. 11.x core/themes/olivero/css/components/form.css
  16. 11.x core/themes/claro/css/components/form.css
  17. 11.x core/themes/starterkit_theme/css/components/form.css
/**
 * Form elements.
 */
form {
  margin: 0;
  padding: 0;
}

/**
 * Prevent regression due to explicit line-height and font-size applied to these
 * elements in normalize.css 7.0.0.
 */
button:not(.button),
input:not([type="file"]):not(.form-text):not(.form-textarea) {
  line-height: 1.25em;
}
textarea,
input[type="search"],
input[type="number"],
input[type="email"] {
  line-height: normal;
}
select {
  font-size: 0.8125rem;
  line-height: 1.42902em;
}
details select {
  line-height: 1.20324em;
}

/**
 * Prevent regression due to fieldset styling that was removed in normalize.css
 * 6.0.0.
 */
fieldset {
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
  border: 1px solid #c0c0c0;
}
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 textarea.error + .ck-editor > .ck-editor__main {
  border: 1px solid #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;
}

/**
 * Prevent regression due to -webkit-appearance being set to button in
 * normalize.css 4.1.0.
 */
::-webkit-file-upload-button {
  -webkit-appearance: push-button;
}

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. 

  9. /**

  10.  * Prevent regression due to explicit line-height and font-size applied to these

  11.  * elements in normalize.css 7.0.0.

  12.  */

  13. button:not(.button),

  14. input:not([type="file"]):not(.form-text):not(.form-textarea) {

  15.   line-height: 1.25em;

  16. }

  17. textarea,

  18. input[type="search"],

  19. input[type="number"],

  20. input[type="email"] {

  21.   line-height: normal;

  22. }

  23. select {

  24.   font-size: 0.8125rem;

  25.   line-height: 1.42902em;

  26. }

  27. details select {

  28.   line-height: 1.20324em;

  29. }

  30. 

  31. /**

  32.  * Prevent regression due to fieldset styling that was removed in normalize.css

  33.  * 6.0.0.

  34.  */

  35. fieldset {

  36.   margin: 0 2px;

  37.   padding: 0.35em 0.625em 0.75em;

  38.   border: 1px solid #c0c0c0;

  39. }

  40. fieldset:not(.fieldgroup) {

  41.   position: relative;

  42.   min-width: 0;

  43.   margin: 1em 0;

  44.   padding: 30px 18px 18px;

  45.   border-radius: 2px;

  46.   background-color: #fcfcfa;

  47. }

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

  49.   position: absolute;

  50.   top: 10px;

  51.   letter-spacing: 0.08em;

  52.   text-transform: uppercase;

  53.   font-size: 1em;

  54.   font-weight: bold;

  55. }

  56. .fieldgroup {

  57.   min-width: 0;

  58. }

  59. .form-item {

  60.   margin: 0.75em 0;

  61. }

  62. /**

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

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

  65.  * overriding Classy.

  66.  */

  67. tr.odd .form-item,

  68. tr.even .form-item {

  69.   margin-top: 0.75em;

  70.   margin-bottom: 0.75em;

  71. }

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

  73.   margin-top: 0;

  74.   margin-bottom: 0;

  75. }

  76. .form-type-checkbox {

  77.   padding: 0;

  78. }

  79. label {

  80.   display: table;

  81.   margin: 0 0 0.1em;

  82.   padding: 0;

  83.   font-weight: bold;

  84. }

  85. label.error {

  86.   color: #a51b00;

  87. }

  88. label[for] {

  89.   cursor: pointer;

  90. }

  91. .form-item label.option {

  92.   text-transform: none;

  93. }

  94. .form-item label.option input {

  95.   vertical-align: middle;

  96. }

  97. .form-disabled label {

  98.   color: #686868;

  99. }

  100. .form-disabled input.form-date,

  101. .form-disabled input.form-text,

  102. .form-disabled input.form-tel,

  103. .form-disabled input.form-time,

  104. .form-disabled input.form-email,

  105. .form-disabled input.form-url,

  106. .form-disabled input.form-search,

  107. .form-disabled input.form-number,

  108. .form-disabled input.form-color,

  109. .form-disabled input.form-file,

  110. .form-disabled textarea.form-textarea,

  111. .form-disabled select.form-select {

  112.   border-color: #d4d4d4;

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

  114.   box-shadow: none;

  115. }

  116. .form-item input.error,

  117. .form-item textarea.error,

  118. .form-item select.error {

  119.   color: #a51b00;

  120.   border-width: 1px;

  121.   border-color: #e62600;

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

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

  124. }

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

  126.   border-width: 1px;

  127.   border-color: #e62600;

  128. }

  129. .form-item textarea.error + .ck-editor > .ck-editor__main {

  130.   border: 1px solid #e62600;

  131. }

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

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

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

  135.   border-color: #e62600;

  136.   outline: 0;

  137.   background-color: #fcf4f2;

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

  139. }

  140. .form-required:after {

  141.   width: 7px;

  142.   height: 7px;

  143.   background-size: 7px 7px;

  144. }

  145. .form-item--error-message {

  146.   margin-top: 0.15em;

  147.   color: #e32700;

  148. }

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

  150.   margin-top: 0;

  151. }

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

  153.   margin: 0;

  154.   padding: 0.25em 0.666em 0;

  155.   border: solid #ccc;

  156.   border-width: 0 1px;

  157. }

  158. 

  159. /* Filter */

  160. ul.tips,

  161. div.description,

  162. .form-item .description {

  163.   margin: 0.2em 0 0 0;

  164.   color: #595959;

  165.   font-size: 0.95em;

  166. }

  167. .form-item .description.error {

  168.   margin-top: 0;

  169.   color: #a51b00;

  170. }

  171. 

  172. ul.tips li {

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

  174. }

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

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

  177. }

  178. .form-type-radio .description,

  179. .form-type-checkbox .description {

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

  181. }

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

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

  184.   margin-right: 1.5em;

  185.   margin-left: 0;

  186. }

  187. .form-text,

  188. .form-textarea {

  189.   border-radius: 2px;

  190.   font-size: 1em;

  191.   line-height: normal;

  192. }

  193. 

  194. input.form-autocomplete,

  195. input.form-text,

  196. input.form-tel,

  197. input.form-email,

  198. input.form-url,

  199. input.form-search,

  200. input.form-number,

  201. input.form-color,

  202. input.form-file,

  203. input.form-date,

  204. input.form-time,

  205. textarea.form-textarea {

  206.   box-sizing: border-box;

  207.   max-width: 100%;

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

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

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

  211.   color: #595959;

  212.   border: 1px solid #b8b8b8;

  213.   border-top-color: #999;

  214.   border-radius: 2px;

  215.   background: #fcfcfa;

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

  217.   font-size: 1em;

  218. }

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

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

  221. }

  222. .form-text:focus,

  223. .form-tel:focus,

  224. .form-email:focus,

  225. .form-url:focus,

  226. .form-search:focus,

  227. .form-number:focus,

  228. .form-color:focus,

  229. .form-file:focus,

  230. .form-textarea:focus,

  231. .form-date:focus,

  232. .form-time:focus {

  233.   border-color: #40b6ff;

  234.   outline: 0;

  235.   background-color: #fff;

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

  237. }

  238. 

  239. .confirm-parent,

  240. .password-parent {

  241.   overflow: visible;

  242.   width: auto;

  243. }

  244. 

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

  246. .form-item-pass .description {

  247.   clear: both;

  248. }

  249. 

  250. /**

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

  252.  * to avoid breaking layouts.

  253.  */

  254. select {

  255.   max-width: 100%;

  256. }

  257. 

  258. /**

  259.  * Select elements - Webkit only

  260.  */

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

  262.   select {

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

  264.     cursor: pointer;

  265.     -webkit-transition: all 0.1s;

  266.     transition: all 0.1s;

  267.     border: 1px solid #a6a6a6;

  268.     border-radius: 0.143em;

  269.     background:

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

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

  272. 

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

  274.     font-size: 0.875rem;

  275.     -webkit-appearance: none;

  276.     -webkit-font-smoothing: antialiased;

  277.   }

  278.   [dir="rtl"] select {

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

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

  281.   }

  282.   select:focus,

  283.   select:hover {

  284.     color: #1a1a1a;

  285.     background-image:

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

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

  288.   }

  289.   select:hover {

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

  291.   }

  292. }

  293. 

  294. /**

  295.  * Improve spacing of cancel link.

  296.  */

  297. #edit-cancel {

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

  299. }

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

  301.   margin-right: 10px;

  302.   margin-left: 0;

  303. }

  304. 

  305. /**

  306.  * Improve form element usability on narrow devices.

  307.  */

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

  309.   input.form-autocomplete,

  310.   input.form-text,

  311.   input.form-tel,

  312.   input.form-email,

  313.   input.form-url,

  314.   input.form-search,

  315.   input.form-number,

  316.   input.form-color,

  317.   input.form-file,

  318.   textarea.form-textarea {

  319.     width: 100%;

  320.     font-size: 1.2em;

  321.     line-height: 1.2em;

  322.   }

  323.   input.form-number {

  324.     width: auto;

  325.   }

  326.   .form-actions input,

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

  328.     float: none;

  329.     width: 100%;

  330.     margin-top: 10px;

  331.     margin-right: 0;

  332.     margin-left: 0;

  333.     padding-bottom: 6px;

  334.   }

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

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

  337.     margin-top: 0;

  338.   }

  339.   details summary {

  340.     overflow: hidden;

  341.     box-sizing: border-box;

  342.     white-space: nowrap;

  343.     text-overflow: ellipsis;

  344.   }

  345.   .password-strength {

  346.     width: 100%;

  347.   }

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

  349.     float: none;

  350.   }

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

  352.     float: none;

  353.     padding: 0;

  354.   }

  355.   #edit-cancel {

  356.     display: block;

  357.     margin: 10px 0 0 0;

  358.   }

  359.   select {

  360.     width: 100%;

  361.   }

  362. }

  363. 

  364. /* Exceptions */

  365. #diff-inline-form select,

  366. div.filter-options select {

  367.   padding: 0;

  368. }

  369. 

  370. /**

  371.  * Prevent regression due to -webkit-appearance being set to button in

  372.  * normalize.css 4.1.0.

  373.  */

  374. ::-webkit-file-upload-button {

  375.   -webkit-appearance: push-button;

  376. }

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