Skip to content

Instantly share code, notes, and snippets.

@guilhermerodrigues680

guilhermerodrigues680/css-select-box-tailwind-css-cdn.md

Last active March 2, 2021 22:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save guilhermerodrigues680/f31b17eb105a33b6c1987063d966dea5 to your computer and use it in GitHub Desktop.
Save guilhermerodrigues680/f31b17eb105a33b6c1987063d966dea5 to your computer and use it in GitHub Desktop.
Download ZIP
CSS - Select Box e Tailwind CSS
Raw
index.html
<!DOCTYPE html>
<html lang="pt-br" class="h-full w-full">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.0.3/dist/tailwind.min.css">
<style>
.custom-select:after {
content: "";
position: absolute;
top: calc(50% - ((6px / 2) / 2)); /* centro - tamanho da borda / 4 */
right: 0.25rem;
z-index: 0;
border-width: 6px 6px 0px 6px;
border-style: solid;
border-color: white transparent transparent transparent;
}
</style>
</head>
<body class="h-full w-full">
<div class="container mx-auto h-full flex justify-center items-center">
<div class="flex-initial">
<div class="custom-select relative w-80 rounded-lg p-1 border-2 border-gray-200 text-base text-gray-800 bg-blue-500 hover:bg-blue-600 hover:border-gray-300 focus-within:bg-blue-600 focus-within:border-gray-300">
<select class="appearance-none w-full bg-transparent relative z-10 cursor-pointer text-white">
<option value="" disabled selected>Select car:</option>
<option value="1">Audi</option>
<option value="2">BMW</option>
<option value="3">Citroen</option>
</select>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment