Custom styled dropdown using Spring MVC/Forms

Question

I am filling a dropdown in a form using the following.

<div class="state">
  <label for="state">state</label>
  <form:select path="state" id="state" required="true">
    <form:option value="" />
    <form:options items="${stateOptions}" itemLabel="value" />
  </form:select>
</div>

This works fine but I have trouble styling it. I am looking for a polyfil or jquery lib that will allow me to create styled dropdowns without having to switch to an unordered list preferably. If that is impossible what is the best way with JSP to handle this using Twitter Bootstrap or one of the other UL based solutions and still have Spring recognize the value.

Par

Works fine on chrome but looks REALLY bad on IE/FF

Shay Elkayam Shay Elkayam · Accepted Answer · 2014-03-13T15:01:49

Have a look at Bootstrap. it's a css framework, which has nice out-of-the-box components and also supports responsive design (changing layout based on device screen size, and thus supporting mobile)

Below is a link to their basic form elements styling

http://getbootstrap.com/css/#forms

If you'd like to learn it, I found the next tutorial to be a good starting point (You can do it in less than an hour if you already have a way with html/css)

http://www.sitepoint.com/understanding-twitter-bootstrap-3/

Also, there are many templates who are based on bootstrap and have their sets of components. You can have a look here

Custom styled dropdown using Spring MVC/Forms

1 Answers