Hello SenangStart!
Zero config, instant styling.
```
**Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html)
# Selects
Category: forms
Description: Native Select Dropdown
## Small Variant
### SenangStart CSS Code
```html
<div layout="relative">
<select space="w:[100%] h:large-3x p-l:small-3x p-r:large" visual="appearance:none border-w:regular border:neutral-200 rounded:medium text-size:small bg:white focus:outline:blue-600">
<option>Option S 1</option>
<option>Option S 2</option>
</select>
<div layout="absolute inset-y:0 right:0 flex items:center" space="p-x:small" visual="pointer-events:none text:gray-500">
<i visual="text-size:base" class="ss ss-chevron-down"></i>
</div>
</div>
```
### Tailwind CSS Code
```html
<div class="relative">
<select class="appearance-none w-full h-10 px-3 pr-8 border-2 border-neutral-200 rounded-lg text-sm bg-white focus:outline-none focus:border-blue-600">
<option>Option S 1</option>
<option>Option S 2</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">
<i class="fas fa-chevron-down text-xs"></i>
</div>
</div>
```
## Medium Variant
### SenangStart CSS Code
```html
<div layout="relative">
<select space="w:[100%] h:big p-l:small-3x p-r:large-3x" visual="appearance:none border-w:regular border:neutral-200 rounded:medium text-size:base bg:white focus:outline:blue-600">
<option>Option M 1</option>
<option>Option M 2</option>
</select>
<div layout="absolute inset-y:0 right:0 flex items:center" space="p-x:small-3x" visual="pointer-events:none text:gray-500">
<i visual="text-size:large" class="ss ss-chevron-down"></i>
</div>
</div>
```
### Tailwind CSS Code
```html
<div class="relative">
<select class="appearance-none w-full h-12 px-3 pr-10 border-2 border-neutral-200 rounded-lg text-base bg-white focus:outline-none focus:border-blue-600">
<option>Option M 1</option>
<option>Option M 2</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-500">
<i class="fas fa-chevron-down text-sm"></i>
</div>
</div>
```
## Large Variant
### SenangStart CSS Code
```html
<div layout="relative">
<select space="w:[100%] h:big-2x p-l:small-3x p-r:big" visual="appearance:none border-w:regular border:neutral-200 rounded:medium text-size:large bg:white focus:outline:blue-600">
<option>Option L 1</option>
<option>Option L 2</option>
</select>
<div layout="absolute inset-y:0 right:0 flex items:center" space="p-x:medium" visual="pointer-events:none text:gray-500">
<i visual="text-size:big" class="ss ss-chevron-down"></i>
</div>
</div>
```
### Tailwind CSS Code
```html
<div class="relative">
<select class="appearance-none w-full h-14 px-3 pr-12 border-2 border-neutral-200 rounded-lg text-lg bg-white focus:outline-none focus:border-blue-600">
<option>Option L 1</option>
<option>Option L 2</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-gray-500">
<i class="fas fa-chevron-down text-base"></i>
</div>
</div>
```