Skip to content

Instantly share code, notes, and snippets.

@jokamjohn
Created April 26, 2020 16:44
Show Gist options
  • Save jokamjohn/0471d5a0a29d1fe4ac13cfe208695aa5 to your computer and use it in GitHub Desktop.
Save jokamjohn/0471d5a0a29d1fe4ac13cfe208695aa5 to your computer and use it in GitHub Desktop.
import React from "react";
import styled from "styled-components";
const Main = styled("div")`
font-family: sans-serif;
background: #f0f0f0;
height: 100vh;
`;
const DropDownContainer = styled("div")`
width: 10.5em;
margin: 0 auto;
`;
const DropDownHeader = styled("div")`
margin-bottom: 0.8em;
padding: 0.4em 2em 0.4em 1em;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
font-weight: 500;
font-size: 1.3rem;
color: #3faffa;
background: #ffffff;
`;
const DropDownListContainer = styled("div")``;
const DropDownList = styled("ul")`
padding: 0;
margin: 0;
padding-left: 1em;
background: #ffffff;
border: 2px solid #e5e5e5;
box-sizing: border-box;
color: #3faffa;
font-size: 1.3rem;
font-weight: 500;
&:first-child {
padding-top: 0.8em;
}
`;
const ListItem = styled("li")`
list-style: none;
margin-bottom: 0.8em;
`;
export default function App() {
return (
<Main>
<h1>Custom Select/dropdown</h1>
<DropDownContainer>
<DropDownHeader>Mangoes</DropDownHeader>
<DropDownListContainer>
<DropDownList>
<ListItem>Mangoes</ListItem>
<ListItem>Apples</ListItem>
<ListItem>Oranges</ListItem>
</DropDownList>
</DropDownListContainer>
</DropDownContainer>
</Main>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment