
import CssTable from '../../components/CssTable'
import Demo from '../../components/demo/select/index.mdx'

## Default Class Table
  
<CssTable name="select" />
  
## Demo
  
<Demo></Demo>
  
## Css Schema


### Base

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Base Schema</span>
</div>
<div class="collapse-content"> 

```css
.select {
  @apply inline-flex cursor-pointer select-none appearance-none;
  @apply h-12 min-h-[3rem] pl-4 pr-10 text-sm leading-loose;
}
.select[multiple] {
  @apply h-auto;
}

```

</div>
</div>



### Styled

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Styled Schema</span>
</div>
<div class="collapse-content"> 

```css
.select {
  @apply bg-base-100 rounded-btn border border-transparent pr-10;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(1px + 50%),
    calc(100% - 16.1px) calc(1px + 50%);
  background-size:
    4px 4px,
    4px 4px;
  background-repeat: no-repeat;
}
.select-bordered {
  @apply border-base-content/20;
}
.select:focus {
  box-shadow: none;
  @apply border-base-content/20 outline-base-content/20 outline outline-2 outline-offset-2;
}
.select-ghost {
  @apply bg-opacity-5;
}
.select-ghost:focus {
  @apply text-base-content bg-opacity-100;
}
.select-primary {
  @apply border-primary;
}
.select-primary:focus {
  @apply outline-primary border-primary;
}
.select-success {
  @apply border-success;
}
.select-success:focus {
  @apply outline-success border-success;
}
.select-warning {
  @apply border-warning;
}
.select-warning:focus {
  @apply outline-warning border-warning;
}
.select-error {
  @apply border-error;
}
.select-error:focus {
  @apply outline-error border-error;
}
.select-neutral {
  @apply border-neutral;
}
.select-neutral:focus {
  @apply outline-neutral border-neutral;
}
.select-disabled,
.select:disabled,
.select[disabled] {
  @apply border-base-200 bg-base-200 placeholder-base-content cursor-not-allowed text-opacity-20 placeholder-opacity-20;
}
.select-multiple,
.select[multiple],
.select[size]:not([size="1"]) {
  @apply bg-none pr-4;
}

[dir="rtl"] .select {
  background-position:
    calc(0% + 12px) calc(1px + 50%),
    calc(0% + 16px) calc(1px + 50%);
}

```

</div>
</div>



### Utils

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Utils Schema</span>
</div>
<div class="collapse-content"> 

```css
.select-md {
  @apply h-12 min-h-[3rem] pl-4 pr-10 text-sm leading-loose;
}
[dir="rtl"] .select-md {
  @apply pl-10 pr-4;
}
.select-lg {
  @apply h-16 min-h-[4rem] pl-6 pr-8 text-lg leading-loose;
}
[dir="rtl"] .select-lg {
  @apply pl-8 pr-6;
}
.select-sm {
  @apply h-8 min-h-[2rem] pl-3 pr-8 text-sm leading-8;
}
[dir="rtl"] .select-sm {
  @apply pl-8 pr-3;
}
.select-xs {
  @apply h-6 min-h-[1.5rem] pl-2 pr-8 text-xs leading-relaxed;
}
[dir="rtl"] .select-xs {
  @apply pl-8 pr-2;
}

```

</div>
</div>



