daisyui/components/textarea.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.6.3 - MIT License */ @layer utilities{.textarea{@layer daisyui.l1.l2.l3{appearance:none;border-radius:var(--radius-field);background-color:var(--color-base-100);vertical-align:middle;--input-color:color-mix(in oklab, var(--color-base-content) 20%, #0000);width:clamp(3rem,20rem,100%);min-height:5rem;font-size:max(var(--font-size,0rem), var(--font-size-min));touch-action:manipulation;border:var(--border) solid var(--input-color,#0000);box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;flex-shrink:1;padding-block:.5rem;padding-inline:.75rem;& textarea{appearance:none;background-color:#0000;border:none;&::placeholder{color:var(--color-base-content);opacity:.5}&:focus,&:focus-within{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){outline-offset:2px;outline:2px solid #0000}}}&:focus,&:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate}@media (pointer:coarse){@supports (-webkit-touch-callout:none){&:focus,&:focus-within{--font-size:1rem}}}&:has(>textarea[disabled]),&:is(:disabled,[disabled]){cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:color-mix(in oklab, var(--color-base-content) 40%, transparent);box-shadow:none;&::placeholder,& ::placeholder{color:var(--color-base-content);opacity:.2}}&:has(>textarea[disabled])>textarea[disabled]{cursor:not-allowed}}}.textarea-ghost{@layer daisyui.l1.l2{box-shadow:none;background-color:#0000;border-color:#0000;&:focus,&:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}}}.textarea-neutral{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-neutral)}}}.textarea-primary{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-primary)}}}.textarea-secondary{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-secondary)}}}.textarea-accent{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-accent)}}}.textarea-info{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-info)}}}.textarea-success{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-success)}}}.textarea-warning{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-warning)}}}.textarea-error{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-error)}}}.textarea-xs{@layer daisyui.l1.l2{--font-size-min:.6875rem;.floating-label:has(&){--top-mul:3;--font-size:.6875rem}}}.textarea-sm{@layer daisyui.l1.l2{--font-size-min:.75rem;.floating-label:has(&){--top-mul:4;--font-size:.75rem}}}.textarea,.textarea-md{@layer daisyui.l1.l2{--font-size-min:.875rem;.floating-label:has(&){--top-mul:5;--font-size:.875rem}}}.textarea-lg{@layer daisyui.l1.l2{--font-size-min:1.125rem;.floating-label:has(&){--top-mul:6;--font-size:1.125rem}}}.textarea-xl{@layer daisyui.l1.l2{--font-size-min:1.375rem;.floating-label:has(&){--top-mul:7;--font-size:1.375rem}}}@media (width>=640px){.sm\:textarea{@layer daisyui.l1.l2.l3{appearance:none;border-radius:var(--radius-field);background-color:var(--color-base-100);vertical-align:middle;--input-color:color-mix(in oklab, var(--color-base-content) 20%, #0000);width:clamp(3rem,20rem,100%);min-height:5rem;font-size:max(var(--font-size,0rem), var(--font-size-min));touch-action:manipulation;border:var(--border) solid var(--input-color,#0000);box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;flex-shrink:1;padding-block:.5rem;padding-inline:.75rem;& textarea{appearance:none;background-color:#0000;border:none;&::placeholder{color:var(--color-base-content);opacity:.5}&:focus,&:focus-within{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){outline-offset:2px;outline:2px solid #0000}}}&:focus,&:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate}@media (pointer:coarse){@supports (-webkit-touch-callout:none){&:focus,&:focus-within{--font-size:1rem}}}&:has(>textarea[disabled]),&:is(:disabled,[disabled]){cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:color-mix(in oklab, var(--color-base-content) 40%, transparent);box-shadow:none;&::placeholder,& ::placeholder{color:var(--color-base-content);opacity:.2}}&:has(>textarea[disabled])>textarea[disabled]{cursor:not-allowed}}}.sm\:textarea-ghost{@layer daisyui.l1.l2{box-shadow:none;background-color:#0000;border-color:#0000;&:focus,&:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}}}.sm\:textarea-neutral{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-neutral)}}}.sm\:textarea-primary{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-primary)}}}.sm\:textarea-secondary{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-secondary)}}}.sm\:textarea-accent{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-accent)}}}.sm\:textarea-info{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-info)}}}.sm\:textarea-success{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-success)}}}.sm\:textarea-warning{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-warning)}}}.sm\:textarea-error{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-error)}}}.sm\:textarea-xs{@layer daisyui.l1.l2{--font-size-min:.6875rem;.floating-label:has(&){--top-mul:3;--font-size:.6875rem}}}.sm\:textarea-sm{@layer daisyui.l1.l2{--font-size-min:.75rem;.floating-label:has(&){--top-mul:4;--font-size:.75rem}}}.sm\:textarea,.sm\:textarea-md{@layer daisyui.l1.l2{--font-size-min:.875rem;.floating-label:has(&){--top-mul:5;--font-size:.875rem}}}.sm\:textarea-lg{@layer daisyui.l1.l2{--font-size-min:1.125rem;.floating-label:has(&){--top-mul:6;--font-size:1.125rem}}}.sm\:textarea-xl{@layer daisyui.l1.l2{--font-size-min:1.375rem;.floating-label:has(&){--top-mul:7;--font-size:1.375rem}}}}@media (width>=768px){.md\:textarea{@layer daisyui.l1.l2.l3{appearance:none;border-radius:var(--radius-field);background-color:var(--color-base-100);vertical-align:middle;--input-color:color-mix(in oklab, var(--color-base-content) 20%, #0000);width:clamp(3rem,20rem,100%);min-height:5rem;font-size:max(var(--font-size,0rem), var(--font-size-min));touch-action:manipulation;border:var(--border) solid var(--input-color,#0000);box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;flex-shrink:1;padding-block:.5rem;padding-inline:.75rem;& textarea{appearance:none;background-color:#0000;border:none;&::placeholder{color:var(--color-base-content);opacity:.5}&:focus,&:focus-within{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){outline-offset:2px;outline:2px solid #0000}}}&:focus,&:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate}@media (pointer:coarse){@supports (-webkit-touch-callout:none){&:focus,&:focus-within{--font-size:1rem}}}&:has(>textarea[disabled]),&:is(:disabled,[disabled]){cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:color-mix(in oklab, var(--color-base-content) 40%, transparent);box-shadow:none;&::placeholder,& ::placeholder{color:var(--color-base-content);opacity:.2}}&:has(>textarea[disabled])>textarea[disabled]{cursor:not-allowed}}}.md\:textarea-ghost{@layer daisyui.l1.l2{box-shadow:none;background-color:#0000;border-color:#0000;&:focus,&:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}}}.md\:textarea-neutral{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-neutral)}}}.md\:textarea-primary{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-primary)}}}.md\:textarea-secondary{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-secondary)}}}.md\:textarea-accent{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-accent)}}}.md\:textarea-info{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-info)}}}.md\:textarea-success{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-success)}}}.md\:textarea-warning{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-warning)}}}.md\:textarea-error{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-error)}}}.md\:textarea-xs{@layer daisyui.l1.l2{--font-size-min:.6875rem;.floating-label:has(&){--top-mul:3;--font-size:.6875rem}}}.md\:textarea-sm{@layer daisyui.l1.l2{--font-size-min:.75rem;.floating-label:has(&){--top-mul:4;--font-size:.75rem}}}.md\:textarea,.md\:textarea-md{@layer daisyui.l1.l2{--font-size-min:.875rem;.floating-label:has(&){--top-mul:5;--font-size:.875rem}}}.md\:textarea-lg{@layer daisyui.l1.l2{--font-size-min:1.125rem;.floating-label:has(&){--top-mul:6;--font-size:1.125rem}}}.md\:textarea-xl{@layer daisyui.l1.l2{--font-size-min:1.375rem;.floating-label:has(&){--top-mul:7;--font-size:1.375rem}}}}@media (width>=1024px){.lg\:textarea{@layer daisyui.l1.l2.l3{appearance:none;border-radius:var(--radius-field);background-color:var(--color-base-100);vertical-align:middle;--input-color:color-mix(in oklab, var(--color-base-content) 20%, #0000);width:clamp(3rem,20rem,100%);min-height:5rem;font-size:max(var(--font-size,0rem), var(--font-size-min));touch-action:manipulation;border:var(--border) solid var(--input-color,#0000);box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;flex-shrink:1;padding-block:.5rem;padding-inline:.75rem;& textarea{appearance:none;background-color:#0000;border:none;&::placeholder{color:var(--color-base-content);opacity:.5}&:focus,&:focus-within{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){outline-offset:2px;outline:2px solid #0000}}}&:focus,&:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate}@media (pointer:coarse){@supports (-webkit-touch-callout:none){&:focus,&:focus-within{--font-size:1rem}}}&:has(>textarea[disabled]),&:is(:disabled,[disabled]){cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:color-mix(in oklab, var(--color-base-content) 40%, transparent);box-shadow:none;&::placeholder,& ::placeholder{color:var(--color-base-content);opacity:.2}}&:has(>textarea[disabled])>textarea[disabled]{cursor:not-allowed}}}.lg\:textarea-ghost{@layer daisyui.l1.l2{box-shadow:none;background-color:#0000;border-color:#0000;&:focus,&:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}}}.lg\:textarea-neutral{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-neutral)}}}.lg\:textarea-primary{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-primary)}}}.lg\:textarea-secondary{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-secondary)}}}.lg\:textarea-accent{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-accent)}}}.lg\:textarea-info{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-info)}}}.lg\:textarea-success{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-success)}}}.lg\:textarea-warning{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-warning)}}}.lg\:textarea-error{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-error)}}}.lg\:textarea-xs{@layer daisyui.l1.l2{--font-size-min:.6875rem;.floating-label:has(&){--top-mul:3;--font-size:.6875rem}}}.lg\:textarea-sm{@layer daisyui.l1.l2{--font-size-min:.75rem;.floating-label:has(&){--top-mul:4;--font-size:.75rem}}}.lg\:textarea,.lg\:textarea-md{@layer daisyui.l1.l2{--font-size-min:.875rem;.floating-label:has(&){--top-mul:5;--font-size:.875rem}}}.lg\:textarea-lg{@layer daisyui.l1.l2{--font-size-min:1.125rem;.floating-label:has(&){--top-mul:6;--font-size:1.125rem}}}.lg\:textarea-xl{@layer daisyui.l1.l2{--font-size-min:1.375rem;.floating-label:has(&){--top-mul:7;--font-size:1.375rem}}}}@media (width>=1280px){.xl\:textarea{@layer daisyui.l1.l2.l3{appearance:none;border-radius:var(--radius-field);background-color:var(--color-base-100);vertical-align:middle;--input-color:color-mix(in oklab, var(--color-base-content) 20%, #0000);width:clamp(3rem,20rem,100%);min-height:5rem;font-size:max(var(--font-size,0rem), var(--font-size-min));touch-action:manipulation;border:var(--border) solid var(--input-color,#0000);box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;flex-shrink:1;padding-block:.5rem;padding-inline:.75rem;& textarea{appearance:none;background-color:#0000;border:none;&::placeholder{color:var(--color-base-content);opacity:.5}&:focus,&:focus-within{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){outline-offset:2px;outline:2px solid #0000}}}&:focus,&:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate}@media (pointer:coarse){@supports (-webkit-touch-callout:none){&:focus,&:focus-within{--font-size:1rem}}}&:has(>textarea[disabled]),&:is(:disabled,[disabled]){cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:color-mix(in oklab, var(--color-base-content) 40%, transparent);box-shadow:none;&::placeholder,& ::placeholder{color:var(--color-base-content);opacity:.2}}&:has(>textarea[disabled])>textarea[disabled]{cursor:not-allowed}}}.xl\:textarea-ghost{@layer daisyui.l1.l2{box-shadow:none;background-color:#0000;border-color:#0000;&:focus,&:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}}}.xl\:textarea-neutral{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-neutral)}}}.xl\:textarea-primary{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-primary)}}}.xl\:textarea-secondary{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-secondary)}}}.xl\:textarea-accent{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-accent)}}}.xl\:textarea-info{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-info)}}}.xl\:textarea-success{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-success)}}}.xl\:textarea-warning{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-warning)}}}.xl\:textarea-error{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-error)}}}.xl\:textarea-xs{@layer daisyui.l1.l2{--font-size-min:.6875rem;.floating-label:has(&){--top-mul:3;--font-size:.6875rem}}}.xl\:textarea-sm{@layer daisyui.l1.l2{--font-size-min:.75rem;.floating-label:has(&){--top-mul:4;--font-size:.75rem}}}.xl\:textarea,.xl\:textarea-md{@layer daisyui.l1.l2{--font-size-min:.875rem;.floating-label:has(&){--top-mul:5;--font-size:.875rem}}}.xl\:textarea-lg{@layer daisyui.l1.l2{--font-size-min:1.125rem;.floating-label:has(&){--top-mul:6;--font-size:1.125rem}}}.xl\:textarea-xl{@layer daisyui.l1.l2{--font-size-min:1.375rem;.floating-label:has(&){--top-mul:7;--font-size:1.375rem}}}}@media (width>=1536px){.\32 xl\:textarea{@layer daisyui.l1.l2.l3{appearance:none;border-radius:var(--radius-field);background-color:var(--color-base-100);vertical-align:middle;--input-color:color-mix(in oklab, var(--color-base-content) 20%, #0000);width:clamp(3rem,20rem,100%);min-height:5rem;font-size:max(var(--font-size,0rem), var(--font-size-min));touch-action:manipulation;border:var(--border) solid var(--input-color,#0000);box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;flex-shrink:1;padding-block:.5rem;padding-inline:.75rem;& textarea{appearance:none;background-color:#0000;border:none;&::placeholder{color:var(--color-base-content);opacity:.5}&:focus,&:focus-within{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){outline-offset:2px;outline:2px solid #0000}}}&:focus,&:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate}@media (pointer:coarse){@supports (-webkit-touch-callout:none){&:focus,&:focus-within{--font-size:1rem}}}&:has(>textarea[disabled]),&:is(:disabled,[disabled]){cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:color-mix(in oklab, var(--color-base-content) 40%, transparent);box-shadow:none;&::placeholder,& ::placeholder{color:var(--color-base-content);opacity:.2}}&:has(>textarea[disabled])>textarea[disabled]{cursor:not-allowed}}}.\32 xl\:textarea-ghost{@layer daisyui.l1.l2{box-shadow:none;background-color:#0000;border-color:#0000;&:focus,&:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}}}.\32 xl\:textarea-neutral{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-neutral)}}}.\32 xl\:textarea-primary{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-primary)}}}.\32 xl\:textarea-secondary{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-secondary)}}}.\32 xl\:textarea-accent{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-accent)}}}.\32 xl\:textarea-info{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-info)}}}.\32 xl\:textarea-success{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-success)}}}.\32 xl\:textarea-warning{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-warning)}}}.\32 xl\:textarea-error{@layer daisyui.l1.l2{&,&:focus,&:focus-within{--input-color:var(--color-error)}}}.\32 xl\:textarea-xs{@layer daisyui.l1.l2{--font-size-min:.6875rem;.floating-label:has(&){--top-mul:3;--font-size:.6875rem}}}.\32 xl\:textarea-sm{@layer daisyui.l1.l2{--font-size-min:.75rem;.floating-label:has(&){--top-mul:4;--font-size:.75rem}}}.\32 xl\:textarea,.\32 xl\:textarea-md{@layer daisyui.l1.l2{--font-size-min:.875rem;.floating-label:has(&){--top-mul:5;--font-size:.875rem}}}.\32 xl\:textarea-lg{@layer daisyui.l1.l2{--font-size-min:1.125rem;.floating-label:has(&){--top-mul:6;--font-size:1.125rem}}}.\32 xl\:textarea-xl{@layer daisyui.l1.l2{--font-size-min:1.375rem;.floating-label:has(&){--top-mul:7;--font-size:1.375rem}}}}}