Select

Custom Select

To set the custom select use .custom-select & .select-style-1 class.

<div class="custom-select select-style-1">
  <select>
     <option disabled selected>Pick your favorite Simpson</option>
     <option>Homer</option>
     <option>Marge</option> 
     <option>Bart</option> 
     <option>Lisa</option> 
     <option>Maggie</option>
   </select>
</div>

Without Bordered

Add the custom select using .custom-select , .select-style-1 & .select-bg-white class.

<div class="custom-select select-style-1 select-bg-white">
  <select>
     <option disabled selected>Pick your favorite Simpson</option>
     <option>Homer</option>
     <option>Marge</option> 
     <option>Bart</option> 
     <option>Lisa</option> 
     <option>Maggie</option>
   </select>
</div>

Rounded Select

To set the rounded select use .custom-select & .select-style-1 class.

<div class="custom-select select-style-1">
  <select>
     <option disabled selected>Pick your favorite Simpson</option>
     <option>Homer</option>
     <option>Marge</option> 
     <option>Bart</option> 
     <option>Lisa</option> 
     <option>Maggie</option>
   </select>
</div>

Bordered Select

To set the custom select use .custom-select & .select-style-1 class.

<div class="w-full max-w-xs border custom-select select-style-1 border-primary select-bg-white dark:bg-dark-dense">
  <select>
     <option disabled selected>Last 7 Days </option>
     <option>Last 2 Weeks </option>
     <option>Last 1 Month</option> 
     <option>Last 3 Month </option> 
   </select>
</div>

Colored Select

To set the colored select use .custom-select & .select-style-2 class.

<div class="w-full max-w-xs border custom-select select-style-2 border-info select-bg-white dark:select-bg-sidebar-dark2">
  <select>
     <option disabled selected>Last 7 Days </option>
     <option>Last 2 Weeks </option>
     <option>Last 1 Month</option> 
     <option>Last 3 Month </option> 
   </select>
</div>

Sizes

To set the custom select size with the help of .select-* class.

<div class="w-full max-w-xs border custom-select select-style-1 border-success select-bg-white dark:bg-dark-dense">
  <select>
     <option disabled selected>Last 7 Days </option>
     <option>Last 2 Weeks </option>
     <option>Last 1 Month</option> 
     <option>Last 3 Month </option> 
   </select>
</div>

With Label

To set the custom select use .custom-select & .select-style-1 class.

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

Copyright 2023 © Govo theme by pixelstrap

Hand crafted & made with

Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Monochrome Mode