A Nicer Select Dropdown
Better select boxes are all over the internet, but I actually couldn't find one that I liked, and that worked for what I needed. Generally when I find code for little elements like this, they are overloaded with stuff. One of the things I dislike most is where there is a large css file that I also have to include to get the desired behavior. This version, perhap not as robust as some out there, does away with extra bloat and styling (I'm sure you're capable of styling it however you want it to look). Any styles, like the showing and hiding of elements is handled through the javascript so you don't have to worry about setting any styles for that.
An overview:
- You can optionally set a data attribute so the dropdown will automatically match the width and margin of whatever element triggers it, like an input box.
- You don't have to insert any css to make things show or hide (although the background of the dropdown is transparent by default, so you may want to give your dropdown div a background color at least).
- While this can just be used as a dropdown for whatever, I used it as a way to create a select box, where you can use checkboxes to select items (or multiple items). The script looks for checkboxes in the dropdown div. If it finds that there are checkboxes and the triggering element is an input box, it will automatically update the input box with the list of values as the user checks items.
- As mentioned, this isn't specifically set up to be a dropdown selector, so it won't autobuild the html for the checkboxes in the dropdown. I think it's more flexible this way, and that way you can name the checkboxes and get the respective data however you want.
Related Posts
Fixed Position Div Isn't Staying Fixed When Scrolling on Android
My nice fixed position toolbar wasn't sticking as it should as I scrolled through on my mobile browser window...
Read Post
Simple Sticky Element
The user scrolls down the page and once the scrolling reaches the top of an element of my choosing, that element sticks to the top of the window, so it's always visible from that point on...
Read Post
Chrome displays a different height than what Chrome says the height should be.
I was changing the height of an element, but no matter where I specified the height, it wasn't displaying what I was putting in
Read Post
My Emerging CSS System
My attempt at doing CSS better.
Read Post
Related Writings
Fixed Position Div Isn't Staying Fixed When Scrolling on Android Simple Sticky Element Chrome displays a different height than what Chrome says the height should be. My Emerging CSS System Standard Price Mixin SASS Why Isn't My SVG Image the Right Size in Internet Explorer Change Placeholder Text Color Debugging Firefox Mobile on Your Computer Fixing Jagged Rendering on CSS Shapes and Arrows in Firefox Fixed position div isn\'t staying fixed in Chrome SASS Quick Guide Accordion Menu Equal CSS Tiles and Columns Targeting the Submit Button with CSS Vertical Center an Image Within a Link (or Div) Setting up SASS with Ruby and Compass on Your Computer why is 100% width body or div wider than the screen on mobile? An updated 2 Column (Fluid Fixed) Layout Including Border and Padding In Box Dimensions Three Column List A SASS Stylesheet For Great Forms Fixed Column on Left, Fluid Column on the Right Fixed Column on Right, Fluid Column on the Left Centering Multiple Floated Elements Vertical Aligning Within a Div CSS Drop Shadows CSS Rounded Corners Top Margin Stolen From Child Element And Added to Parent (Margin Collapsing)-
Adventure
-
Web Dev
-
The Built Environment
-
Society
-
Projects
-
Other
-
Lifestyle
Submitting...