List Box in Sparkle

Hi, is it possible to create a List Box or Dropdown List Box in Sparkle. I have this requirement in my website.

If it’s not possible in Sparkle yet, is there another way that I can create one using code and then attach it to my site in Sparkle

Thanks,
Ujjwal

@vermau, No it’s not possible in Sparkle.

I have worked around it using radio buttons or tick boxes which works just as good! :slight_smile:

You can add a list box by adding an embed box to your page and paste the following code into the edit box:


.select {
position: relative;
display: inline-block;
margin-bottom: 15px;
width: 100%;
} .select select {
font-family: ‘Arial’;
display: inline-block;
width: 100%;
cursor: pointer;
padding: 10px 15px;
outline: 0;
border: 0px solid #000000;
border-radius: 0px;
background: #e6e6e6;
color: #7b7b7b;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.select select::-ms-expand {
display: none;
}
.select select:hover,
.select select:focus {
color: #000000;
background: #cccccc;
}
.select select:disabled {
opacity: 0.5;
pointer-events: none;
}
.select_arrow {
position: absolute;
top: 16px;
right: 15px;
pointer-events: none;
border-style: solid;
border-width: 8px 5px 0px 5px;
border-color: #7b7b7b transparent transparent transparent;
}
.select select:hover ~ .select_arrow,
.select select:focus ~ .select_arrow {
border-top-color: #000000;
}
.select select:disabled ~ .select_arrow {
border-top-color: #cccccc;
}

<body>
    <div class="select">
        <select>
            <option>--Select--</option>
            <option>Hello 1</option>
            <option>Hello 2</option>
            <option>Hello 3</option>
            <option>Hello 4</option>
        </select>
        <div class="select_arrow">
        </div>
    </div>
</body>

Notice that the body section is where you change your list items. Just replace the Hello 1 to Hello 4 with the words you wish to display. If you want to add more items, simply add more option rows, if you want less, delete the rows you don’t need.

This is fully responsive so it will expand to the size of the embed box.

It should be noted that this only creates a selector box and allows you to select one of the options. It does not, in itself provide any other function, such as a link. If you want the selection to do something other than display the selected choice, you will have to give more details so I can provide the appropriate code.

1 Like

Thank you so much @francbrowne for the code and help. I will surely implement this in my site.

Just a question out of curiosity – Did you use some specific css generator editor to generate the css for list box or did you write the whole css by hand !!

I grabbed it from a library of snippets I’ve collected over the years, But there are a number of menu generators on the net that will produce code for you so check them out - I’m sure you will find one that gives you full control of the styling. Here is one you could try. This one allows you to set up links on each option. You also have a submit or go button that activates the selected link. The CSS is also quite a bit smaller . just sticking to the basics - but should work well for you.