Welcome to Open Carnage

A resource for Halo 1 modding and tech, with unique means of rewarding individual content creation and support. Have a wander to see why we're worth the time! EST. 2012

Sign in to follow this  
Followers 0

[HTML/CSS/JS] JSDrop - some CSS and JS for custom select box arrows


"JSDrop is a small bit of javascript, as well as some css tricks in order to have custom drop down arrows cross-browser using css "content:" and data-* attributes."

Essentially, fixes problems with custom drop down select box arrows and whatnot.
Read the readme on the github page, its 1500 words in markdown and the forum doesn't do markdown ;P

Demo: http://codepen.io/Wi...mith/full/DobEJ


You have a form containing the select box you wish to have your custom styles on.
In this form, your select box is assigned a class, which will be selected in the JavaScript with document.querySelectorAll().
The select box has a wrapper, which does not require any specific class, but requires a data-content attribute. The class is recommended for styling purposes, but you could theoretically select it with .selectWrap[data-content].
(Note: this is automatically set to the first/default item in your drop down, however IE8 may not play nice without it being set.)


Tucker933, WaeV and Ryx like this


Share this post

Link to post
Share on other sites

Members of Open Carnage never see off-site ads.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
  • Recently Browsing   0 members

    No registered users viewing this page.