<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
title
>Pure CSS Styled Select</
title
>
<
style
>
body {
background-color: #a4ecae;
font-family: 'Source Sans Pro', sans-serif;
}
.demo {
margin: 100px auto;
}
.dropdown-container {
width: 250px;
margin: 100px auto;
position: relative;
}
select {
width: 100%;
height: 50px;
font-size: 100%;
font-weight: bold;
cursor: pointer;
border-radius: 0;
background-color: #2bd325;
border: none;
border-bottom: 2px solid #37c40c;
color: white;
appearance: none;
padding: 10px;
padding-right: 38px;
-webkit-appearance: none;
-moz-appearance: none;
transition: color 0.3s ease, background-color 0.3s ease,
border-bottom-color 0.3s ease;
}
/* For IE <= 11 */
select::-ms-expand {
display: none;
}
.select-icon {
position: absolute;
top: 4px;
right: 4px;
width: 30px;
height: 36px;
pointer-events: none;
border: 2px solid #70d82a;
padding-left: 5px;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.select-icon svg.icon {
transition: fill 0.3s ease;
fill: white;
}
select:hover,
select:focus {
color: #5ac02b;
background-color: white;
border-bottom-color: #141313;
}
select:hover ~ .select-icon,
select:focus ~ .select-icon {
background-color: white;
border-color: #3dd13db6;
}
select:hover ~ .select-icon svg.icon,
select:focus ~ .select-icon svg.icon {
fill: #67c02b;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"demo"
>
<
div
class
=
"dropdown-container"
>
<
select
class
=
"slct"
>
<
option
value
=
"1"
>GFG</
option
>
<
option
value
=
"2"
>OS
</
option
>
<
option
value
=
"3"
>DBMS</
option
>
<
option
value
=
"4"
>
Data Structure
</
option
>
</
select
>
<
div
class
=
"select-icon"
>
<
svg
focusable
=
"false"
viewBox
=
"0 0 104 128"
width
=
"25"
height
=
"35"
class
=
"icon"
>
<
path
d="m2e1 95a9 9 0 0 1 -9 9 9 9 0 0 1 -9 -9 9 9
0 0 1 9 -9 9 9 0 0 1 9 9zm0-3e1a9 9 0 0 1
-9 9 9 9 0 0 1 -9 -9 9 9 0 0 1 9 -9 9 9 0 0
1 9 9zm0-3e1a9 9 0 0 1 -9 9 9 9 0 0 1 -9 -9 9
9 0 0 1 9 -9 9 9 0 0 1 9 9zm14
55h68v1e1h-68zm0-3e1h68v1e1h-68zm0-3e1h68v1e1h-68z">
</
path
>
</
svg
>
</
div
>
</
div
>
</
div
>
</
body
>