---
title: Default Select Menu
category: Application
paid: false
isActive: true
ltr: {"react":{"jsxTail":[{"label":"App.jsx","code":"export default () => {\n  return (\n    <div className=\"relative w-72 max-w-full mx-auto mt-12\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className=\"absolute top-0 bottom-0 w-5 h-5 my-auto text-gray-400 right-3\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n          clipRule=\"evenodd\"\n        />\n      </svg>\n      <select className=\"w-full px-3 py-2 text-sm text-gray-600 bg-white border rounded-lg shadow-sm outline-none appearance-none focus:ring-offset-2 focus:ring-indigo-600 focus:ring-2\">\n        <option>Project manager</option>\n        <option>Software engineer</option>\n        <option>IT manager</option>\n        <option>UI / UX designer</option>\n      </select>\n    </div>\n  );\n};\n"}],"jsxCss":[{"code":"export default () => {\n    return (\n        <div className=\"select-menu-default\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                <path fillRule=\"evenodd\" d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\" clipRule=\"evenodd\" />\n            </svg>\n            <select className=\"select-menu\">\n                <option>Project manager</option>\n                <option>Software engineer</option>\n                <option>IT manager</option>\n                <option>UI / UX designer</option>\n            </select>\n        </div>\n    )\n}","label":"App.jsx"},{"code":".select-menu-default {\n  position: relative;\n  max-width: 20rem;\n  margin: 3rem auto 0px auto;\n}\n.select-menu-default svg {\n  position: absolute;\n  top: 0px;\n  bottom: 0px;\n  right: 0.625rem;\n  width: 1.5rem;\n  height: 1.5rem;\n  margin-top: auto;\n  margin-bottom: auto;\n  color: #9ca3af;\n}\n.select-menu-default .select-menu {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  width: 100%;\n  padding: 0.625rem;\n  color: #6b7280;\n  background-color: #FFF;\n  border: solid 1px #e5e7eb;\n  border-radius: 0.375rem;\n  box-shadow: 0 1px 2px 0 #0000000d;\n  outline: none;\n}\n.select-menu-default .select-menu:focus {\n  border-color: #4f46e5;\n}","label":"style.css"}]},"preview":"function App() {\n  return (\n    <div className=\"relative w-72 max-w-full mx-auto mt-12\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className=\"absolute top-0 bottom-0 w-5 h-5 my-auto text-gray-400 right-3\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n          clipRule=\"evenodd\"\n        />\n      </svg>\n      <select className=\"w-full px-3 py-2 text-sm text-gray-600 bg-white border rounded-lg shadow-sm outline-none appearance-none focus:ring-offset-2 focus:ring-indigo-600 focus:ring-2\">\n        <option>Project manager</option>\n        <option>Software engineer</option>\n        <option>IT manager</option>\n        <option>UI / UX designer</option>\n      </select>\n    </div>\n  );\n};\n","vue":{"vueTail":[{"code":"<template>\n  <div class=\"relative max-w-xs mx-auto mt-12\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"absolute top-0 bottom-0 w-6 h-6 my-auto text-gray-400 right-2.5\"\n      viewBox=\"0 0 20 20\" fill=\"currentColor\">\n      <path fillRule=\"evenodd\"\n        d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n        clipRule=\"evenodd\" />\n    </svg>\n    <select\n      class=\"w-full p-2.5 text-gray-500 bg-white border rounded-md shadow-sm outline-none appearance-none focus:border-indigo-600\">\n      <option>Project manager</option>\n      <option>Software engineer</option>\n      <option>IT manager</option>\n      <option>UI / UX designer</option>\n    </select>\n  </div>\n</template>","label":"App.vue"}],"vueCss":[{"label":"App.vue","code":"<template>\n  <div class=\"select-menu-default\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n      <path fillRule=\"evenodd\"\n        d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n        clipRule=\"evenodd\" />\n    </svg>\n    <select class=\"select-menu\">\n      <option>Project manager</option>\n      <option>Software engineer</option>\n      <option>IT manager</option>\n      <option>UI / UX designer</option>\n    </select>\n  </div>\n</template>\n"},{"code":".select-menu-default {\n  position: relative;\n  max-width: 20rem;\n  margin: 3rem auto 0px auto;\n}\n\n.select-menu-default svg {\n  position: absolute;\n  top: 0px;\n  bottom: 0px;\n  right: 0.625rem;\n  width: 1.5rem;\n  height: 1.5rem;\n  margin-top: auto;\n  margin-bottom: auto;\n  color: #9ca3af;\n}\n\n.select-menu-default .select-menu {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  width: 100%;\n  padding: 0.625rem;\n  color: #6b7280;\n  background-color: #FFF;\n  border: solid 1px #e5e7eb;\n  border-radius: 0.375rem;\n  box-shadow: 0 1px 2px 0 #0000000d;\n  outline: none;\n}\n\n.select-menu-default .select-menu:focus {\n  border-color: #4f46e5;\n}","label":"style.css"}]},"html":{"htmlTail":[]}}
slug: /select-menus
id: ae1b23fc-05d6-4065-ad06-6346a9db37da
created_at: 1
---

<FUIDefaultSelectMenu />