<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Bulma Select States</
title
>
<
link
rel
=
'stylesheet'
href
=
<
style
>
.container>div {
margin-top: 25px;
}
</
style
>
</
head
>
<
body
class
=
"has-text-centered"
>
<
h1
class
=
"is-size-2 has-text-success"
>
GeeksforGeeks
</
h1
>
<
b
>Bulma Select States</
b
>
<
div
class
=
"container"
>
<
div
>
<
span
>Normal State:</
span
>
<
div
class
=
"select"
>
<
select
>
<
option
selected>Select dropdown</
option
>
<
option
>Data Structures</
option
>
<
option
>Algorithms</
option
>
<
option
>DBMS</
option
>
</
select
>
</
div
>
</
div
>
<
div
>
<
span
>Hovered State:</
span
>
<
div
class
=
"select"
>
<
select
class
=
"is-hovered"
>
<
option
selected>Select dropdown</
option
>
<
option
>Data Structures</
option
>
<
option
>Algorithms</
option
>
<
option
>DBMS</
option
>
</
select
>
</
div
>
</
div
>
<
div
>
<
span
>Focused State:</
span
>
<
div
class
=
"select"
>
<
select
class
=
"is-focused"
>
<
option
selected>Select dropdown</
option
>
<
option
>Data Structures</
option
>
<
option
>Algorithms</
option
>
<
option
>DBMS</
option
>
</
select
>
</
div
>
</
div
>
<
div
>
<
span
>Active State: </
span
>
<
div
class
=
"select"
>
<
select
class
=
"is-active"
>
<
option
selected>Select dropdown</
option
>
<
option
>Data Structures</
option
>
<
option
>Algorithms</
option
>
<
option
>DBMS</
option
>
</
select
>
</
div
>
</
div
>
<
div
>
<
span
>Loading State: </
span
>
<
div
class
=
"select is-loading"
>
<
select
>
<
option
selected>Select dropdown</
option
>
<
option
>Data Structures</
option
>
<
option
>Algorithms</
option
>
<
option
>DBMS</
option
>
</
select
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>