diff --git a/css/material.css b/css/material.css
index 0692e19..313872f 100644
--- a/css/material.css
+++ b/css/material.css
@@ -1,88 +1,104 @@
-/** Fix input font family **/
 .material .form-group input,
 .material .form-group textarea,
 .material .form-group select,
 .material .selectize-input {
-  font-family: "Proxima Nova", Montserrat, sans-serif;
-  font-weight: 300;
+    font-family: "Proxima Nova", Montserrat, sans-serif;
+    font-weight: 300;
+}
+
+.material .form-control {
+    font-size: 14px;
 }
 
-/** Fix inputs labels **/
 .material .form-group {
     margin: 0;
 }
 
-.material .form-group.label-floating label.control-label,
-.material .form-group.label-placeholder label.control-label {
-    height: auto;
-    position: static;
-    overflow: hidden;
-    font-size: 14px;
-    margin-bottom: -36px;
-    padding-top: 26px;
-    width: 100%;
-    line-height: 1.42857143;
-    transform: scale(0.75);
-    transform-origin: 0 -80px;
+.material .form-group .form-control:focus,
+.material .form-group .selectize-control {
+    box-shadow: none;
 }
-.material .form-group.label-floating.is-empty:not(.is-focused) label.control-label,
-.material .form-group.label-placeholder.is-empty:not(.is-focused) label.control-label {
-    transform: scale(1);
-    font-size: 14px;
+
+
+.material .form-group:not(.has-error) .form-control:not(.selectize-dropdown):not(.selectize-control) {
+    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6) 2px,
+                        rgba(0, 150, 136, 0) 2px),
+                        linear-gradient(to top,
+                        rgba(0, 0, 0, 0.26) 1px, transparent 1px);
 }
 
-.material .form-group .input-group-addon {
-    font-size: 14px;
-    line-height: inherit;
-    padding: 7px 12px 14px 12px;
-    background: none;
-    border: none;
+
+.material .has-error .check {
+    border-color: rgb(244, 67, 54) !important;
 }
 
-.material .form-group .input-group-addon:last-child ,
-.material .form-group .input-group-btn {
-    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 30%);
-    transition: background .3s ease; 
+.material .has-error .checkbox label {
+    color: rgb(244, 67, 54) !important;
 }
 
-.material .form-group.is-empty:not(.is-focused) .input-group-addon:last-child ,
-.material .form-group.is-empty:not(.is-focused) .input-group-btn {
-    background: linear-gradient(to right, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 1) 30%); 
+.material .has-error input,
+.material .has-danger input {
+    color: rgb(244, 67, 54) !important;
+    background-image: linear-gradient(to top, rgba(244, 67, 54, 0.6) 2px,
+                        rgba(0, 150, 136, 0) 2px),
+                        linear-gradient(to top,
+                        rgb(244, 67, 54) 1px, transparent 1px) !important;
+}
+
+.material .has-error .input-group-addon,
+.material .has-danger .input-group-addon {
+    border: none;
+    background: transparent;
 }
 
-.material .form-group.is-empty:not(.is-focused) .input-group .input-group-addon:first-child {
-    visibility: hidden;
+.material .has-error label,
+.material .has-danger label {
+    color: rgb(244, 67, 54);
 }
 
-.material .form-group.is-focused label,
-.material .form-group.is-focused label.control-label {
-    color: rgba(0, 0, 0, 0.7) !important;
+.material .form-group.is-focused:not(.has-error) label.form-control-label {
+    color: rgba(0, 0, 0, 0.8);
 }
 
-.material .form-group.label-floating.is-focused .form-control:not(.selectize-dropdown) {
-    background-image: -webkit-linear-gradient(#333, #333), webkit-linear-gradient(#D2D2D2, #D2D2D2);
-    background-image: linear-gradient(#333, #333), linear-gradient(#D2D2D2, #D2D2D2);
+.material .form-group:hover:not(.is-focused) label.form-control-label {
+    color: rgba(0, 0, 0, 0.6);
 }
 
-.form-control, .form-group .form-control.selectize-dropdown {
-    background-image: none;
+.material .form-group .selectize-control .selectize-input {
+    padding: 6px 0px;
+    border: none;
+    border-radius: 0px;
+    box-shadow: none;
+    background: transparent;
+    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1) 1px,
+                        rgba(0, 150, 136, 0) 1px),
+                        linear-gradient(to top,
+                        rgba(0, 0, 0, 0.26) 1px, transparent 1px);
 }
 
-.form-group .form-control.selectize-control .selectize-input {
+.material .form-group .bmd-label-floating {
+    z-index: 2;
     overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-height: 16px;
 }
 
-input, .form-control {
-    color: rgba(0, 0, 0, 1);
+.material .form-group.is-focused .bmd-label-floating {
+    max-height: 12px;
 }
 
-.material .form-group.label-floating .input-group-btn {
-    padding-right: 0;
+.material .form-group .selectize-control .selectize-dropdown {
+    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
+    border: none;
+    color: rgba(0, 0, 0, 0.87);
 }
 
-.material .form-group.label-floating .input-group-btn .btn {
-    text-transform: none;
-    border-bottom: 1px solid #ccc;
+.material .dropdown-item.active,
+.material .dropdown-item.active:focus,
+.material .dropdown-item.active:hover {
+    background-color: rgb(238, 238, 238);
+    color: rgb(33, 33, 33);
 }
 
 /* Change form to material design */
@@ -228,6 +244,7 @@ input, .form-control {
     color: rgba(0,0,0, 0.95) !important;
     background: rgba(0, 0, 0, 0.1) !important;
 }
+
 .material .btn-primary.btn-outline:active,
 .material .btn-primary.btn-outline.active {
     border-color: #b87430;
@@ -243,7 +260,59 @@ input, .form-control {
     content: "";
 }
 
-.checkbox .checkbox-material,
-label.checkbox-inline .checkbox-material {
-    margin-right: 10px;
+.material .bootstrap-datetimepicker-widget.dropdown-menu {
+    opacity: initial;
+    transform: none;
+    transform-origin: none;
+    transition: none;
+}
+
+.material label {
+    font-weight: 300;
+}
+
+.material .form-group.has-danger .form-control,
+.material .form-group.has-error .form-control {
+    box-shadow: none;
+}
+
+.material .radio label,
+.material .checkbox label {
+    padding-left: 2.5rem;
+}
+
+.material .radio label input[type="radio"] ~ .bmd-radio-inner-circle,
+.material .radio label input[type="radio"]:checked ~ .bmd-radio-inner-circle {
+    background-color: #757575;
+    border-color: #757575;
+}
+
+.material .radio label input[type="radio"]:checked ~ .bmd-radio-outer-circle{
+    border-color: #757575;
+}
+
+.material .checkbox label input[type="checkbox"]:checked + .checkbox-decorator .check,
+.material .checkbox label input[type="checkbox"]:checked + .checkbox-decorator .check:before {
+    color: #757575;
+    border-color: #757575;
+}
+
+.material .selectize-dropdown {
+    padding: 0px;
+}
+
+.material .selectize-dropdown [data-selectable] {
+    padding: 16px;
+}
+
+.material .selectize-input {
+    min-height: 46px;
+}
+
+.material .selectize-input .item {
+    padding: 7px 0px;
+}
+
+.material .label-addon {
+    margin-left: calc(0.75rem + 1%);
 }
diff --git a/js/legalform.js b/js/legalform.js
index dc4589b..79ef88f 100644
--- a/js/legalform.js
+++ b/js/legalform.js
@@ -106,7 +106,7 @@ function LegalForm($) {
         if (input === null) return null;
 
         if (data.label) {
-            label = (mode === 'build' ? '<label>' : '<label for="' + data.id + '">') + data.label + '' + (data.required ? ' <span class="required">*</span>' : '') + '</label>';
+            label = (mode === 'build' ? '<label>' : '<label for="' + data.id + '"') + (data.type === 'money' ? ' class="label-addon">' : '>') + data.label + '' + (data.required ? ' <span class="required">*</span>' : '') + '</label>';
         }
 
         // Build HTML
@@ -271,7 +271,7 @@ function LegalForm($) {
                 if (data.optionValue.length === 1) {
                     input_unit = strbind('<span class="input-group-addon">%s</span>', mode === 'build' ? data.optionValue[0] : '{{ ' + data.name + '.unit }}');
                 } else {
-                    input_unit = '\n' + strbind('<div class="input-group-btn"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">%s <span class="caret"></span></button>', mode === 'build' ? data.optionValue[0] : '{{ ' + data.name + '.unit }}') + '\n';
+                    input_unit = '\n' + strbind('<div class="input-group-btn"><button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">%s </button>', mode === 'build' ? data.optionValue[0] : '{{ ' + data.name + '.unit }}') + '\n';
                     if (mode === 'use') {
                         input_unit += strbind('<ul class="dropdown-menu pull-right dropdown-select" data-name="%s" role="menu">', data.name + '.unit') + '\n'
                         input_unit += '{{# %s.amount == 1 ? meta.%s.singular : meta.%s.plural }}<li><a>{{ . }}</a></li>{{/ meta }}'.replace(/%s/g, data.name) + '\n';
@@ -380,7 +380,7 @@ function LegalForm($) {
         if (data.optionsText && mode === 'use') data.name = data.value;
 
         if (type === 'option') {
-            lines.push('<option value="" ' + (data.required ? 'disabled' : '') + '>&nbsp;</option>');
+            lines.push('<option class="dropdown-item" value="" ' + (data.required ? 'disabled' : '') + '>&nbsp;</option>');
         }
 
         for (var i = 0; i < keys.length; i++) {
@@ -390,7 +390,7 @@ function LegalForm($) {
             if (!key) continue;
 
             if (type === 'option') {
-                lines.push(strbind('<option value="%s">%s</option>', value, key));
+                lines.push(strbind('<option class="dropdown-item" value="%s">%s</option>', value, key));
             } else {
                 var attr = $.extend({type: type}, mode === 'use' ? (value === null ? {checked: data.value} : {name: data.value, value: value}) : {name: data.name});
                 lines.push(strbind('<div class="option"><label><input data-id="%s" %s %s %s/> %s</label></div>', data.name, attrString(data, 'id;name;value;type'), attrString(attr, false), attrString(extra, false), key));
diff --git a/js/ractive-legalform.js b/js/ractive-legalform.js
index 3f60ca5..dab10b7 100644
--- a/js/ractive-legalform.js
+++ b/js/ractive-legalform.js
@@ -89,6 +89,10 @@
          * @param {string} keypath
          */
         onChangeLegalForm: function (newValue, oldValue, keypath) {
+            if (newValue === oldValue) {
+                return;
+            }
+
             if (this.isCondition(keypath)) {
                 this.onChangeCondition(newValue, oldValue, keypath);
             }
@@ -100,7 +104,7 @@
             this.updateExpressions(newValue, oldValue, keypath);
 
             setTimeout($.proxy(this.rebuildWizard, this), 200);
-            setTimeout($.proxy(this.refreshLikerts, this), 0);
+            setTimeout($.proxy(this.refreshLikerts, this), 10);
         },
 
         /**
@@ -154,7 +158,7 @@
             //Use timeout because of some ractive bug: expressions, that depend on setting key, may be not updated, or can even cause an error
             setTimeout(function() {
                 ractive.set(name, newValue);
-            }, 0);
+            }, 10);
         },
 
         /**
@@ -173,6 +177,12 @@
             });
         },
 
+        refreshSelectizes: function () {
+            $('select').each(function() {
+                ractive.validation.handleValidation(this);
+            });
+        },
+
         /**
          * Rebuild the wizard
          */
@@ -210,6 +220,8 @@
 
             metaRecursive(this.meta, $.proxy(this.initField, this));
 
+            setTimeout($.proxy(this.refreshSelectizes, this), 1);
+
             this.on('complete', function() {
                 $('#doc').trigger('shown.preview');
             })
@@ -226,15 +238,6 @@
 
                 $(this).datetimepicker({ locale: ractive.getLocale('short'), format: 'DD-MM-YYYY' });
                 $(e.target).closest('.input-group-addon').trigger('click');
-
-                //Fix material label
-                $(this).find(':input').on('focusout', function(e) {
-                    if (e.target.value !== '') {
-                        $(e.target).parent().parent().removeClass('is-empty');
-                    } else {
-                        $(e.target).parent().parent().addClass('is-empty');
-                    }
-                });
             });
         },
 
@@ -330,9 +333,6 @@
                 var name = $(input).attr('name');
 
                 ractive.updateModel(name);
-
-                //Fix material design
-                $(e.target).parent().removeClass('is-empty');
             });
         },
 
@@ -352,20 +352,17 @@
                     render: {
                         option: function(item, escape) {
                             if (item.value === '' && $select.attr('required')) {
-                                return '<div style="pointer-events: none; color: #aaa;">' + escape(item.text) + '</div>';
+                                return '<div class="dropdown-item" style="pointer-events: none; color: #aaa;">' + escape(item.text) + '</div>';
                             }
 
-                            return '<div>' + escape(item.text) + '</div>';
+                            return '<div class="dropdown-item">' + escape(item.text) + '</div>';
                         }
                     },
-                    onDropdownClose: function($dropdown) {
-                        var value = ractive.get(name);
-
+                    onChange: function(value) {
                         if (value !== '' && value !== null) {
-                            $dropdown.parent().parent().removeClass('is-empty');
+                            $($select).parent().parent().addClass('is-filled');
                         }
-                    },
-                    onChange: function(value) {
+
                         ractive.set(name, value);
                         ractive.validation.validateField($select);
                         $($select).change();
@@ -520,6 +517,7 @@
                 if (field.conditions && !ractive.get(conditionsField)) return;
 
                 var $element = $(ractive.elWizard).find('input[name="' + field.name + '"]');
+
                 if (!$element.hasClass('selectized')) return ractive.initExternalSourceSelectize($element, field); //Handle condition change
 
                 //Handle url change. Auto launch search with current shown field text
diff --git a/js/to-material.js b/js/to-material.js
index 418ee7b..e7a6422 100644
--- a/js/to-material.js
+++ b/js/to-material.js
@@ -3,10 +3,10 @@
  *
  * @param $docWizard
  */
-(function($) { 
+(function($) {
     $.fn.toMaterial = function() {
         var $docWizard = $(this);
-        
+
         // Add class to the material design to prevent another styles for it.
         $docWizard.addClass('material');
 
@@ -40,11 +40,11 @@
         });
 
         // Do all labels floating for nice view
-        $docWizard.find('.form-group').addClass('label-floating');
-        $docWizard.find('.form-group > label').addClass('control-label');
+        $docWizard.find('.form-group > label').addClass('form-control-label');
+        $docWizard.find('.selectize-input > input').addClass('form-control');
 
         if ($.material) {
-            $.material.init();
+            $.material.bootstrapMaterialDesign();
         }
     };
 })(jQuery);
diff --git a/material.html b/material.html
index aa6528a..37e7250 100644
--- a/material.html
+++ b/material.html
@@ -10,13 +10,13 @@
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
         <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
-        <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Montserrat">
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
         <link rel="stylesheet" href="https://s3-eu-west-1.amazonaws.com/legalthings-cdn/bootstrap-wizard/bootstrap-wizard.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.12/css/perfect-scrollbar.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/css/bootstrap-material-design.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.bootstrap3.min.css">
 
         <link rel="stylesheet" href="css/likert.css">
         <link rel="stylesheet" href="css/general.css">
@@ -54,7 +54,7 @@ <h1>LegalForm.js demo with Material Design</h1>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/ractive/0.9.0-build-117/ractive.min.js"></script>
         <script src="https://cdn.rawgit.com/jmespath/jmespath.js/master/jmespath.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/js/material.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.umd.min.js"></script>
 
         <script src="js/moment-custom.js"></script>
         <script src="js/define-property.js"></script>
@@ -69,6 +69,7 @@ <h1>LegalForm.js demo with Material Design</h1>
         <script src="js/demo/demo.js"></script>
         <script type="text/javascript">
             $('.wizard').toMaterial();
+            $('.wizard').bootstrapMaterialDesign();
         </script>
     </body>
 </html>
diff --git a/spec/legalform.build.spec.js b/spec/legalform.build.spec.js
index 4dd6490..46a31bd 100644
--- a/spec/legalform.build.spec.js
+++ b/spec/legalform.build.spec.js
@@ -301,7 +301,7 @@ describe("building a LegalForm", function() {
                         <div class="input-group" >
                             <input class="form-control" name="test_group.foo.amount" value="{{ test_group.foo.amount }}" type="text" pattern="\\d+">
                             <div class="input-group-btn">
-                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">{{ test_group.foo.unit }} <span class="caret"></span></button>
+                                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">{{ test_group.foo.unit }} </button>
                                 <ul class="dropdown-menu pull-right dropdown-select" data-name="test_group.foo.unit" role="menu">
                                 {{# test_group.foo.amount == 1 ? meta.test_group.foo.singular : meta.test_group.foo.plural }}
                                     <li><a>{{ . }}</a></li>
@@ -315,7 +315,7 @@ describe("building a LegalForm", function() {
                     <div class="form-group" data-role="wrapper">
                         <label for="field:test_group.bar">Bar <span class="required">*</span></label>
                         <div class="input-group" ><input class="form-control" name="test_group.bar.amount" value="{{ test_group.bar.amount }}" type="text" decimals="0" required="required" validation=".bar % 2 === 0" min="2" max="8" pattern="\\d+">
-                            <div class="input-group-btn"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">{{ test_group.bar.unit }} <span class="caret"></span></button>
+                            <div class="input-group-btn"><button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">{{ test_group.bar.unit }} </button>
                                 <ul class="dropdown-menu pull-right dropdown-select" data-name="test_group.bar.unit" role="menu">
                                     {{# test_group.bar.amount == 1 ? meta.test_group.bar.singular : meta.test_group.bar.plural }}<li><a>{{ . }}</a></li>{{/ meta }}
                                 </ul>
@@ -365,7 +365,7 @@ describe("building a LegalForm", function() {
                 <form class="form navmenu-form">
 
                     <div class="form-group" data-role="wrapper">
-                        <label for="field:test_group.foo">Foo</label>
+                        <label for="field:test_group.foo" class="label-addon">Foo</label>
                         <div class="input-group">
                             <span class="input-group-addon">{{ valuta }}</span>
                             <input class="form-control" type="text" pattern="\\d+(,\\d\\d)?" name="test_group.foo" id="field:test_group.foo" value="{{ test_group.foo }}">
@@ -374,7 +374,7 @@ describe("building a LegalForm", function() {
 
                     {{#  test_group.foo == 4 }}
                     <div class="form-group" data-role="wrapper">
-                        <label for="field:test_group.bar">Bar <span class="required">*</span></label>
+                        <label for="field:test_group.bar" class="label-addon">Bar<span class="required">*</span></label>
                         <div class="input-group">
                             <span class="input-group-addon">{{ valuta }}</span>
                             <input class="form-control" type="text" pattern="\\d+(,\\d\\d)?" name="test_group.bar" value="{{ test_group.bar }}" required="required" validation=".bar % 2 === 0" min="2" max="8" id="field:test_group.bar">
@@ -650,20 +650,20 @@ describe("building a LegalForm", function() {
                     <div class="form-group" data-role="wrapper">
                         <label for="field:test_group.foo">Foo</label>
                         <select class="form-control" name="test_group.foo" id="field:test_group.foo" value="{{ test_group.foo }}" >
-                            <option value="">&nbsp;</option>
-                            <option value="1">one</option>
-                            <option value="2">two</option>
-                            <option value="3">three</option>
+                            <option class="dropdown-item" value="">&nbsp;</option>
+                            <option class="dropdown-item" value="1">one</option>
+                            <option class="dropdown-item" value="2">two</option>
+                            <option class="dropdown-item" value="3">three</option>
                         </select>
                     </div>
 
                     <div class="form-group" data-role="wrapper">
                         <label for="field:test_group.foo_required">Foo required <span class="required">*</span></label>
                         <select class="form-control" name="test_group.foo_required" id="field:test_group.foo_required" value="{{ test_group.foo_required }}" required="required">
-                            <option value="" disabled>&nbsp;</option>
-                            <option value="1">one</option>
-                            <option value="2">two</option>
-                            <option value="3">three</option>
+                            <option class="dropdown-item" value="" disabled>&nbsp;</option>
+                            <option class="dropdown-item" value="1">one</option>
+                            <option class="dropdown-item" value="2">two</option>
+                            <option class="dropdown-item" value="3">three</option>
                         </select>
                     </div>
 
@@ -1225,7 +1225,7 @@ describe("building a LegalForm", function() {
                         <div class="input-group">
                             <input class="form-control" name="second_step.number_with_unit.amount" value="{{ second_step.number_with_unit.amount }}" type="text" pattern="\\d+">
                             <div class="input-group-btn">
-                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">{{ second_step.number_with_unit.unit }} <span class="caret"></span></button>
+                                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">{{ second_step.number_with_unit.unit }} </button>
                                 <ul class="dropdown-menu pull-right dropdown-select" data-name="second_step.number_with_unit.unit" role="menu">
                                     {{# second_step.number_with_unit.amount == 1 ? meta.second_step.number_with_unit.singular : meta.second_step.number_with_unit.plural }}
                                     <li><a>{{ . }}</a></li>{{/ meta }}
@@ -1235,7 +1235,7 @@ describe("building a LegalForm", function() {
                     </div>
                     {{#  first_step.number == 4 }}
                     <div class="form-group" data-role="wrapper">
-                        <label for="field:second_step.amount">Amount</label>
+                        <label for="field:second_step.amount" class="label-addon">Amount</label>
                         <div class="input-group"><span class="input-group-addon">{{ valuta }}</span>
                             <input class="form-control" type="text" pattern="\\d+(,\\d\\d)?" name="second_step.amount" value="{{ second_step.amount }}" min="2" max="8" id="field:second_step.amount">
                         </div>
@@ -1266,10 +1266,10 @@ describe("building a LegalForm", function() {
                     <div class="form-group" data-role="wrapper">
                         <label for="field:third_step.select">Select</label>
                         <select class="form-control" name="third_step.select" id="field:third_step.select" value="{{ third_step.select }}">
-                            <option value="">&nbsp;</option>
-                            <option value="1">one</option>
-                            <option value="2">two</option>
-                            <option value="3">three</option>
+                            <option class="dropdown-item" value="">&nbsp;</option>
+                            <option class="dropdown-item" value="1">one</option>
+                            <option class="dropdown-item" value="2">two</option>
+                            <option class="dropdown-item" value="3">three</option>
                         </select>
                     </div>
                 </form>