Select

Select Default

You can use select as code show bellow 

 <select class="select w-full max-w-xs">
  <option disabled selected>Pick your favorite Simpson</option>
  <option>Homer</option>
  <option>Marge</option> 
  <option>Bart</option> 
  <option>Lisa</option> 
  <option>Maggie</option>
</select>

Select With Border

You can use select with border by adding .select-bordered 

 <select class="dark:bg-dark-dense select select-bordered w-full max-w-xs">
  <option disabled selected>Pick your favorite Simpson</option>
  <option>Homer</option>
  <option>Marge</option> 
  <option>Bart</option> 
  <option>Lisa</option>  
  <option>Maggie</option>
</select>

Select primary

You can use select primary by adding .select-primary classes 

 <select class="dark:bg-dark-dense select select-primary w-full max-w-xs">
  <option disabled selected>Pick your favorite Simpson</option>
  <option>Homer</option>
  <option>Marge</option> 
  <option>Bart</option> 
  <option>Lisa</option> 
  <option>Maggie</option>
</select>

Select secondary

You can use select secondary by adding .select-secondary classes 

 <select class="dark:bg-dark-dense select select-secondary w-full max-w-xs">
  <option disabled selected>Pick your favorite Simpson</option>
  <option>Homer</option>
  <option>Marge</option> 
  <option>Bart</option> 
  <option>Lisa</option> 
  <option>Maggie</option>
</select>

Select success

You can use select success by adding .select-success classes 

 <select class="dark:bg-dark-dense select select-success w-full max-w-xs">
  <option disabled selected>Pick your favorite Simpson</option>
  <option>Homer</option>
  <option>Marge</option> 
  <option>Bart</option> 
  <option>Lisa</option> 
  <option>Maggie</option>
</select>

Select Danger

You can use select warning by adding .select-danger classes 

 <select class="dark:bg-dark-dense select select-warning w-full max-w-xs">
  <option disabled selected>Pick your favorite Simpson</option>
  <option>Homer</option>
  <option>Marge</option> 
  <option>Bart</option> 
  <option>Lisa</option> 
  <option>Maggie</option>
</select>

Select info

You can use select info by adding .select-info classes 

  <select class="dark:bg-dark-dense select select-info w-full max-w-xs">
  <option disabled selected>Pick your favorite Simpson</option>
  <option>Homer</option>
  <option>Marge</option> 
  <option>Bart</option> 
  <option>Lisa</option> 
  <option>Maggie</option>
</select>

With Form-control and Labels

You can use select with form-control and labels as code show bellow 
  <div class="form-control w-full max-w-xs">
  <label class="label">
     <span class="label-text">Pick the best fantasy franchise</span>
     <span class="label-text-alt">Alt label</span>
  </label>
  <select class="dark:bg-dark-dense select select-bordered">
     <option disabled selected>Pick one</option>
     <option>Star Wars</option>
     <option>Harry Potter</option>
     <option>Lord of the Rings</option>
     <option>Planet of the Apes</option>
     <option>Star Trek</option>
  </select>
  <label class="label">
     <span class="label-text-alt">Alt label</span>
     <span class="label-text-alt">Alt label</span>
  </label>
</div>

Select With Different Size

You can use different size select by adding .select-(lg, md, sm, xs) classes 

  <!-- lg -->
<select class="dark:bg-dark-dense select select-bordered select-lg w-full max-w-xs">
  <option disabled selected>Large</option>
  <option>Large Apple</option>
  <option>Large Orange</option>
  <option>Large Tomato</option>
</select>

<!-- md -->
<select class="dark:bg-dark-dense select select-bordered w-full max-w-xs">
 <option disabled selected>Normal</option>
 <option>Normal Apple</option>
 <option>Normal Orange</option>
 <option>Normal Tomato</option>
</select> 
 
<!-- sm -->
<select class="dark:bg-dark-dense select select-bordered select-sm w-full max-w-xs">
 <option disabled selected>Small</option>
 <option>Small Apple</option>
 <option>Small Orange</option>
 <option>Small Tomato</option>
</select>

<!-- xs --> 
<select class="dark:bg-dark-dense select select-bordered select-xs w-full max-w-xs">
 <option disabled selected>Tiny</option>
 <option>Tiny Apple</option>
 <option>Tiny Orange</option>
 <option>Tiny Tomato</option>
</select>

Copyright 2023 © Dexo theme by pixelstrap

Hand crafted & made with

Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Sidebar Type
    Choose Sidebar icon & full
Reset Buy Now