score:3
this is just a "masked" <select>
tag. the scrolling is built-in to browsers and will happen when the number of options exceeds the height of the viewport.
there are multiple ways of making custom-designed dropdowns, including a fully custom solution, but the easiest way, and the way that amazon is doing it is by overlaying an element on top of a <select>
tag with pointer-events disabled so your click passes through to trigger the <select>
tag's native dropdown implementation.
from there you can store the <select>
tag's value with onchange
and usestate
and then tie the "all" text in the overlay to that state variable.
here's an example of the css:
label {
position:relative;
display:block;
width:max-content;
}
span {
display:block;
pointer-events:none;
background:yellow;
border-top-left-radius:20px;
border-bottom-left-radius:20px;
position:relative;
z-index:1;
padding:.25em 1.75em .25em 1em;
}
span::after {
content:"";
position:absolute;
top:50%;
right:10px;
transform:translatey(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #000000 transparent transparent transparent;
}
select {
cursor:pointer;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:red;
opacity:0;
}
<label class="select-wrapper">
<span>🎨 all</span>
<select>
<option>red</option>
<option>green</option>
<option>blue</option>
</select>
</label>
Source: stackoverflow.com
Related Query
- Scroll when hover arrow - like amazon website
- Issue in react MUI table in horizontal scroll when i show button in right side of table on hover
- how to change the arrow and put a triangle instead of it in react-select and when hover change color?
- React - Infinite scroll - scroll doesn't appear when open the application in big screen like TV/projector
- Website wont scroll when browser is minimised size even though I have media queries set up? - CSS
- When Master scroll will work then both arrow will be in middle
- How to dynamically hover over react-list elements when arrow keys are pressed?
- React: Prevent scroll when modal is open
- CSS module hover styles when inside another module
- How to keep scroll position using flatlist when navigating back in react native ?
- ReactJS change color of element on scroll and when certain position is reached
- MultiSelect box popover keeps jumping when scroll or select items
- Animate children when hover at parent with Framer-motion
- Framer motion animate when element is in-view (When you scroll to element)
- ReactJS how to render a component only when scroll down and reach it on the page?
- When using React Is it preferable to use fat arrow functions or bind functions in constructor?
- Maintaining scroll position only works when not near the bottom of messages div
- How to implement a React infinite scroll component for a chat app like Facebook Messenger?
- how to change hover for all elements ( border, text and arrow ) in react-select?
- How to scroll a React page when it loads?
- React scroll position after render when scrollTop is zero
- Scroll to top when using Switch (react-router)
- Keep scroll position when adding element to the top
- S3 Amazon Static Website with React?
- Display Back button to go back like the browser back button when not in home path
- react-scroll | How to scroll to a specific targeted component when clicking on Navbar Link
- I'd like to have my image filenames / paths when using Jest Snapshots
- Should one use const when declaring an arrow function in React class
- React scroll to anchor when opening URL in browser
- How to detect screen orientation in mobile website when using react js and orientationchange event?
More Query from same tag
- How to solve TypeError: Cannot read property 'map' of undefined?
- .keyboard is not a function when used with React
- Update state with Reactjs DatePicker doesn't work
- How to add anchor tag in the string passing to checkbox in react
- How to declare props for react-select in typescript?
- updating multiple items in redux array
- Access to router directly by typing it's address on the address bar in react-router
- Sending data from a form in React to DyanmoDB via AWS Lambda with Node
- Firebase Login dont seem to work
- ReactJS Convert json to [name: value:] pair
- How can I change the styling of a NAV based on what page React-Router has selected
- ReactJs prevent e and dot in an input type number
- PayPal Donate button causes error "Unterminated JSX contents"
- Fill active button with color on buttions that are dynamically created
- Cannot create react app template. npm hangs
- How to implement mouseEnter and mouseout play effect video in react?
- Is there a way to load react library files separately and not in the bundled files when using react with babel, webpack and gulp as building tool?
- React Router protected routes
- Using Styled-Map with PolishedJS
- verify react functional component to be there
- How to make the below element display above element on hover
- Why pristine props does not disable button for both Redux-Fields
- Material UI table error "TypeError: rows.slice is not a function"
- how to bring all the pictures from a collection in firebase?
- Writing a JEST unit test with React
- Testing React: Target Container is not a DOM element
- Accepting Decimal values within input
- Immutable vs javascript arrays, objects - what's the right balance?
- Using State Variables in Inline Styling
- How to translate long text long text, using react-i18next?