codrops / selectinspiration

Creative styles and ideas for custom select elements.

Inspiration for Custom Select Elements

Creative styles and ideas for custom select elements.

Article on Codrops

Demo

Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".

Read more here: License

© Codrops 2014

selectinspiration's Issues

SelectFX messes with fixed elements

I've put a dropdown menu inside a push menu created from this plugin:
http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/

The SelectFX object is messing the fixed elements related to the push menu. This is bug isolated to google chrome.

how can I add scrollbar and edit its style

i really love this style of selection box! however, i have a lot of option in selection...
so i need to add scrollbar in it. but when i add scrollbar, its style is not suitable with the original
like this picture (it's very strange in visual)

Therefore, i want to change the scollbar style like below

i have used the " css ::-webkit-scrollbar" , it works in chrome but not in firefox
i want to use a way to across browser so i find jquery way to do that.
but seem to lots of jquery way having some problmes...
( i also tried to use the jscrollpane ((http://jscrollpane.kelvinluck.com/)) , lots of pepole recommand that. but it can't work)
can any way to solve that?
thank you and forgive my poor english..

Better way to get selected option

From what I understand, it's possible for the selected property of an option to be set without the attribute being present. For this reason, I think that it would be better to use the following:

var selectedOpt = this.el.options[this.el.selectedIndex];

Instead of the current:

var selectedOpt = this.el.querySelector('option[selected]');

Would you accept a PR?

data-link don't work

The attribute data-link for open a link in option list doesn't work.

To fix this, change line 130 in selectFx.js to:
link = 'data-link="' + el.getAttribute( 'data-link' ) + '"';

Thanks for this tutorial!

Some enhancements

First of all: thank you, this is a lovely project!
I tweaked it to my needs, and made some changes of my own:

<select class="select">...</select>

Can now be simply:

<select>...</select>

The z-index is decremented each time a SelectFx is instantiated (because there were overlapping), and the appendChild(this.selEl) call has been fixed (was inserting as the end of the parent, not at the right place).

I can fork the project and make a merge request, are you interested in?
Cheers,

Jk.

How to select an item programmatically?

Hello,

How to select item programatically with js or jquery in the drop down?

Doesn't work

It doesn't work. Only HTML is rendered. No selects work.

I added styles:

<link rel="stylesheet" href="/assets/select/css/cs-select.css">
<link rel="stylesheet" href="/assets/select/css/cs-skin-border.css">

I added .js. I even wrapped them into jQuery $(document).ready(function () {...}) function.

<script type="text/javascript" src="/assets/select/js/classie.js"></script>
<script type="text/javascript" src="/assets/select/js/selectFx.js"></script>

I copy-pasted HTML markup:

<div class="cs-select cs-skin-border" tabindex="0"><span class="cs-placeholder">Preferred contact method</span>
    <div class="cs-options">
        <ul>
            <li data-option="" data-value="email"><span>E-Mail</span>
            </li>
            <li data-option="" data-value="twitter"><span>Twitter</span>
            </li>
            <li data-option="" data-value="linkedin"><span>LinkedIn</span>
            </li>
        </ul>
    </div>
    <select class="cs-select cs-skin-border">
        <option value="" disabled="" selected="">Preferred contact method</option>
        <option value="email">E-Mail</option>
        <option value="twitter">Twitter</option>
        <option value="linkedin">LinkedIn</option>
    </select>
</div>

Doesn't work. What did I miss? Why it doesn't work?

overflow won't scroll with up/down keys

Hi,

I have a long country list but it can only take up say 300px height, so needs overflow scrolling.
i tried putting overflow scroll on the element but navigating up & down with the keys does not scroll
the list.

could you give an example of how this should be set up please if I've missed something?

thanks
J

doesn't pre-tick option with "selected" on initialisation

Hi I have a pre-selected option (second one here)

<option value="">Please select</option>
<option value="1" selected>First</option>

but when i initialise SelectFx, it doesn't tick that option by default

thanks
J

Using Angular

Is it possible to use it with angular?

Select multiple attribute

Add aria-tags

Loving the script!

I implemented my own version of it in ES2015, and it works beautifully. However, I added the correct aria-tags as well - perhaps you should do the same?

Pls publish selectFx as npm Package

how to use selectFx as module and how to import it to our project

and how to use classie as global module coz i get this error?

classie is undefined

Callback after initialization

In my application, I need a return when the selectFx is initialized. Maybe someone else needs it.

How to trigger change event

I am using “overlay” mode, it is simply amazing. Thanks. Yet I have one question. I need to trigger change event from outside. I init it as:

vwt_SelectInstance = new selectFx(el,{stickyPlaceholder:false, 
  onChange:function(el){
    $('.jq-exf-conditional').load("<?=base_url('app/load_form');?>",{f:el});
  }
});

How can I trigger onChange event after page is fully loaded.

< ?php if($id==TRUE):? >
vwt_SelectInstance.trigger('change') // I need something like this :)
< ?php endif;? >

Thanks for any help

Add package.json

Please add a valid package.json manifest to your repo to enable usage of npm/yarn install to load your plugin.

I would send you a pull request but the details inside package.json like author and licenses are not obvious.