CODEWITHSUNDEEP
javascriptjqueryhtmlcssselect
Zerium
Zerium

Reputation: 17343

Select boxes similar to the ones seen on Google?

I would like to create a <select> box similar to the one seen below on Google:

Google Select Box

I'm having quite a lot of trouble styling it correctly. Anyone know of a plugin or a solution?

Upvotes: 1

Views: 1634

Answers (3)

&#193;xel Costas Pena
&#193;xel Costas Pena

Reputation: 6305

There isn't any Google public release of their styles. copying it won't be easy because not only css is required, but javascript. There are many alternatives to create fancy ui elements, like Foundation, for example.

Upvotes: 0

Abhilash
Abhilash

Reputation: 1610

Try Chosen plugin. Although it doesn't look exactly like what you show, it does have many features worth investigating

Upvotes: 2

Greeso
Greeso

Reputation: 8271

I do not know of a plugin, but I could give you a solution idea for a plugin you make on your own:

First, create your HTML, something like this

<div class="customDropdown">Month<span><img src="littlearrows.jpg" /></span></div>
<div id="customList">
    <ul>
        <li>January</li>
        <li>February</li>
        <li>March</li>
        <li>...etc.</li>
    </ul>
</div>

Then you style your divs using CSS, making customDropdown the way you want, and also making customList hidden, and also probably making sure it shows only 4 rows, with a scroll bar to the right hand side (whether custom or brwozer, your choice).

After that, create jQuery or Javascript code, where you add the behaviour of your list. You may need to give each month entry an ID so when the user selects the month, you will extract the value.

IMPORTANT NOTE: This is just an idea, I have done similar stuff, but I am not giving you a complete solution, you can change/modify or even discard this idea however you like, but this is how I would approach it.

Upvotes: 4

Related Questions