diff --git a/CHANGES.md b/CHANGES.md
index 2ea559542..44a9effbb 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -34,6 +34,12 @@
 -   pat calendar: Store view, date and active categories per URL, allowing to individually customize the calendar per page.
 -   pat tooltip: Use tippy v6 based implementation.
 -   Allow overriding the public path from outside via the definition of a ``window.__patternslib_public_path__`` global variable.
+-   Introduce new ``core/dom`` module for DOM manipulation and traversing.
+    ``core/dom`` includes methods which help transition from jQuery to the JavaScript DOM API.
+-   core dom: Add ``jqToNode`` to return a DOM node if a jQuery node was passed.
+-   core dom: Add ``querySelectorAllAndMe`` to do a querySelectorAll including the starter element.
+-   core dom: Add ``wrap`` wrap an element with a wrapper element.
+-   core dom: Add ``hide`` and ``show`` for DOM elements which retain the original display value.
 
 ### Technical
 
@@ -61,6 +67,8 @@
 -   pat calendar: Fix language loading error "Error: Cannot find module './en.js'"
 -   pat depends, pat auto suggest: Fix a problem with initialization of ``pat-auto-suggest`` which occurred after the lazy loading changes.
 -   pat checklist: Also dispatch standard ``change`` event when de/selecting all items.
+-   pat select: Add missing ``<span>`` element around the select element itself. Fixes: https://github.com/quaive/ploneintranet.prototype/issues/1087
+-   pat depends/core utils: Do not set inline styles when showing elements in transition mode ``none``. Fixes #719.
 
 
 ## 3.0.0-dev - unreleased
diff --git a/src/core/dom.js b/src/core/dom.js
new file mode 100644
index 000000000..8974b3cd6
--- /dev/null
+++ b/src/core/dom.js
@@ -0,0 +1,66 @@
+/* Utilities for DOM traversal or navigation */
+
+const DATA_STYLE_DISPLAY = "__patternslib__style__display";
+
+const jqToNode = (el) => {
+    // Return a DOM node if a jQuery node was passed.
+    if (el.jquery) {
+        el = el[0];
+    }
+    return el;
+};
+
+const querySelectorAllAndMe = (el, selector) => {
+    // Like querySelectorAll but including the element where it starts from.
+    // Returns an Array, not a NodeList
+
+    el = jqToNode(el); // Ensure real DOM node.
+
+    const all = [...el.querySelectorAll(selector)];
+    if (el.matches(selector)) {
+        all.unshift(el); // start element should be first.
+    }
+    return all;
+};
+
+const wrap = (el, wrapper) => {
+    // Wrap a element with a wrapper element.
+    // See: https://stackoverflow.com/a/13169465/1337474
+    el = jqToNode(el); // Ensure real DOM node.
+    wrapper = jqToNode(wrapper); // Ensure real DOM node.
+
+    el.parentNode.insertBefore(wrapper, el);
+    wrapper.appendChild(el);
+};
+
+const hide = (el) => {
+    // Hides the element with ``display: none``
+    el = jqToNode(el); // Ensure real DOM node.
+    if (el.style.display === "none") {
+        // Nothing to do.
+        return;
+    }
+    if (el.style.display) {
+        el[DATA_STYLE_DISPLAY] = el.style.display;
+    }
+    el.style.display = "none";
+};
+
+const show = (el) => {
+    // Shows element by removing ``display: none`` and restoring the display
+    // value to whatever it was before.
+    el = jqToNode(el); // Ensure real DOM node.
+    const val = el[DATA_STYLE_DISPLAY] || null;
+    el.style.display = val;
+    delete el[DATA_STYLE_DISPLAY];
+};
+
+const dom = {
+    jqToNode: jqToNode,
+    querySelectorAllAndMe: querySelectorAllAndMe,
+    wrap: wrap,
+    hide: hide,
+    show: show,
+};
+
+export default dom;
diff --git a/src/core/dom.test.js b/src/core/dom.test.js
new file mode 100644
index 000000000..647801097
--- /dev/null
+++ b/src/core/dom.test.js
@@ -0,0 +1,108 @@
+import $ from "jquery";
+import dom from "./dom";
+
+describe("core.dom tests", () => {
+    // Tests from the core.dom module
+
+    describe("jqToNode tests", () => {
+        it("always returns a bare DOM node no matter if a jQuery or bare DOM node was passed.", (done) => {
+            const el = document.createElement("div");
+            const $el = $(el);
+
+            expect(dom.jqToNode($el)).toBe(el);
+            expect(dom.jqToNode(el)).toBe(el);
+
+            done();
+        });
+    });
+
+    describe("querySelectorAllAndMe tests", () => {
+        it("return also starting node if query matches.", (done) => {
+            const el = document.createElement("div");
+            el.setAttribute("class", "node1");
+            el.innerHTML = `<span class="node2">hello.</span>`;
+
+            const res1 = dom.querySelectorAllAndMe(el, ".node1");
+            expect(res1.length).toBe(1);
+            expect(res1[0].outerHTML).toBe(
+                `<div class="node1"><span class="node2">hello.</span></div>`
+            );
+
+            const res2 = dom.querySelectorAllAndMe(el, ".node2");
+            expect(res2.length).toBe(1);
+            expect(res2[0].outerHTML).toBe(`<span class="node2">hello.</span>`);
+
+            const res3 = dom.querySelectorAllAndMe(el, "div, span");
+            expect(res3.length).toBe(2);
+            expect(res3[0].outerHTML).toBe(
+                `<div class="node1"><span class="node2">hello.</span></div>`
+            );
+            expect(res3[1].outerHTML).toBe(`<span class="node2">hello.</span>`);
+
+            done();
+        });
+    });
+
+    describe("wrap tests", () => {
+        it("wraps an element within another element.", (done) => {
+            const parent = document.createElement("main");
+            const el = document.createElement("div");
+            const wrapper = document.createElement("section");
+            parent.appendChild(el);
+
+            dom.wrap(el, wrapper);
+            expect(parent.outerHTML).toBe(
+                `<main><section><div></div></section></main>`
+            );
+
+            done();
+        });
+    });
+
+    describe("show/hide tests", () => {
+        it("shows or hides and does keeps the CSS display rule value.", (done) => {
+            const el = document.createElement("div");
+            el.style.borderTop = "2em";
+            el.style.marginTop = "4em";
+
+            dom.hide(el);
+
+            expect(el.style.borderTop).toBe("2em");
+            expect(el.style.marginTop).toBe("4em");
+            expect(el.style.display).toBe("none");
+            expect(
+                el.getAttribute("style").indexOf("display") >= -1
+            ).toBeTruthy();
+
+            dom.show(el);
+
+            expect(el.style.borderTop).toBe("2em");
+            expect(el.style.marginTop).toBe("4em");
+            expect(el.style.display).toBeFalsy();
+            expect(
+                el.getAttribute("style").indexOf("display") === -1
+            ).toBeTruthy();
+
+            el.style.display = "inline";
+            dom.hide(el);
+
+            expect(el.style.borderTop).toBe("2em");
+            expect(el.style.marginTop).toBe("4em");
+            expect(el.style.display).toBe("none");
+            expect(
+                el.getAttribute("style").indexOf("display") >= -1
+            ).toBeTruthy();
+
+            dom.show(el);
+
+            expect(el.style.borderTop).toBe("2em");
+            expect(el.style.marginTop).toBe("4em");
+            expect(el.style.display).toBe("inline");
+            expect(
+                el.getAttribute("style").indexOf("display") >= -1
+            ).toBeTruthy();
+
+            done();
+        });
+    });
+});
diff --git a/src/core/utils.js b/src/core/utils.js
index 67f2a801e..23e58dc1a 100644
--- a/src/core/utils.js
+++ b/src/core/utils.js
@@ -1,5 +1,6 @@
 import $ from "jquery";
 import _ from "underscore";
+import dom from "./dom";
 
 $.fn.safeClone = function () {
     var $clone = this.clone();
@@ -278,45 +279,53 @@ function hasValue(el) {
     return false;
 }
 
-const transitions = {
-    none: { hide: "hide", show: "show" },
-    fade: { hide: "fadeOut", show: "fadeIn" },
-    slide: { hide: "slideUp", show: "slideDown" },
-};
+const hideOrShow = (el, visible, options, pattern_name) => {
+    const $el = $(el);
+    el = dom.jqToNode(el); // ensure dom node
+
+    const transitions = {
+        none: { hide: "hide", show: "show" },
+        fade: { hide: "fadeOut", show: "fadeIn" },
+        slide: { hide: "slideUp", show: "slideDown" },
+    };
 
-function hideOrShow($el, visible, options, pattern_name) {
     const duration =
         options.transition === "css" || options.transition === "none"
             ? null
             : options.effect.duration;
 
-    $el.removeClass("visible hidden in-progress");
-    const onComplete = function () {
-        $el.removeClass("in-progress")
-            .addClass(visible ? "visible" : "hidden")
-            .trigger("pat-update", {
-                pattern: pattern_name,
-                transition: "complete",
-            });
+    const on_complete = () => {
+        el.classList.remove("in-progress");
+        el.classList.add(visible ? "visible" : "hidden");
+        $(el).trigger("pat-update", {
+            pattern: pattern_name,
+            transition: "complete",
+        });
     };
-    if (!duration) {
-        if (options.transition !== "css") {
-            $el[visible ? "show" : "hide"]();
-        }
-        onComplete();
-    } else {
+
+    el.classList.remove("visible");
+    el.classList.remove("hidden");
+    el.classList.remove("in-progress");
+
+    if (duration) {
         const t = transitions[options.transition];
-        $el.addClass("in-progress").trigger("pat-update", {
+        el.classList.add("in-progress");
+        $el.trigger("pat-update", {
             pattern: pattern_name,
             transition: "start",
         });
         $el[visible ? t.show : t.hide]({
             duration: duration,
             easing: options.effect.easing,
-            complete: onComplete,
+            complete: on_complete,
         });
+    } else {
+        if (options.transition !== "css") {
+            dom[visible ? "show" : "hide"](el);
+        }
+        on_complete();
     }
-}
+};
 
 function addURLQueryParameter(fullURL, param, value) {
     /* Using a positive lookahead (?=\=) to find the given parameter,
diff --git a/src/core/utils.test.js b/src/core/utils.test.js
index 45e81eaf3..fe1e1bd4d 100644
--- a/src/core/utils.test.js
+++ b/src/core/utils.test.js
@@ -427,6 +427,43 @@ describe("hideOrShow", function () {
             "hidden",
         ]);
     });
+
+    it("transition none does not mess up styles", (done) => {
+        const el = document.createElement("div");
+        el.style.borderTop = "2em";
+        el.style.marginTop = "4em";
+
+        utils.hideOrShow(el, false, { transition: "none" }, "noname");
+
+        expect(el.style.borderTop).toBe("2em");
+        expect(el.style.marginTop).toBe("4em");
+        expect(el.style.display).toBe("none");
+        expect(el.getAttribute("style").indexOf("display") >= -1).toBeTruthy();
+
+        utils.hideOrShow(el, true, { transition: "none" }, "noname");
+
+        expect(el.style.borderTop).toBe("2em");
+        expect(el.style.marginTop).toBe("4em");
+        expect(el.style.display).toBeFalsy();
+        expect(el.getAttribute("style").indexOf("display") === -1).toBeTruthy();
+
+        el.style.display = "inline";
+        utils.hideOrShow(el, false, { transition: "none" }, "noname");
+
+        expect(el.style.borderTop).toBe("2em");
+        expect(el.style.marginTop).toBe("4em");
+        expect(el.style.display).toBe("none");
+        expect(el.getAttribute("style").indexOf("display") >= -1).toBeTruthy();
+
+        utils.hideOrShow(el, true, { transition: "none" }, "noname");
+
+        expect(el.style.borderTop).toBe("2em");
+        expect(el.style.marginTop).toBe("4em");
+        expect(el.style.display).toBe("inline");
+        expect(el.getAttribute("style").indexOf("display") >= -1).toBeTruthy();
+
+        done();
+    });
 });
 
 describe("hasValue", function () {
diff --git a/src/pat/depends/index.html b/src/pat/depends/index.html
index b5beb763d..2ace5b01d 100644
--- a/src/pat/depends/index.html
+++ b/src/pat/depends/index.html
@@ -21,19 +21,19 @@
                     <legend>Flavour</legend>
 
                     <label
-                        ><input type="radio" name="flavour" value="margherita" />
+                        ><input type="radio" name="flavour" value="margherita" autocomplete="off" />
                         Margherita</label
                     >
                     <label
-                        ><input type="radio" name="flavour" value="hawaii" />
+                        ><input type="radio" name="flavour" value="hawaii" autocomplete="off" />
                         Hawaii</label
                     >
                     <label
-                        ><input type="radio" name="flavour" value="bacon" />
+                        ><input type="radio" name="flavour" value="bacon" autocomplete="off" checked />
                         Bacon Supreme</label
                     >
                     <label
-                        ><input type="radio" name="flavour" value="sea" />
+                        ><input type="radio" name="flavour" value="sea" autocomplete="off" />
                         Fruits de mer</label
                     >
                 </fieldset>
@@ -55,7 +55,7 @@
                 <fieldset class="group pat-checklist">
                     <legend>Add extra toppings</legend>
                     <label>
-                        <input type="checkbox" name="custom" /> Add extra
+                        <input type="checkbox" name="custom" autocomplete="off" /> Add extra
                         toppings
                     </label>
                 </fieldset>
@@ -68,18 +68,18 @@
                     <label
                         class="pat-depends"
                         data-pat-depends="flavour!=hawaii"
-                        ><input type="checkbox" name="pineapple" />
+                        ><input type="checkbox" name="pineapple" autocomplete="off"/>
                         Pineapple</label
                     >
                     <label
-                        ><input type="checkbox" name="gorgonzola" />
+                        ><input type="checkbox" name="gorgonzola" autocomplete="off" />
                         Gorgonzola</label
                     >
                     <label
-                        ><input type="checkbox" name="peanuts" /> Peanuts</label
+                        ><input type="checkbox" name="peanuts" autocomplete="off" /> Peanuts</label
                     >
                     <label
-                        ><input type="checkbox" name="redonion" /> Red
+                        ><input type="checkbox" name="redonion" autocomplete="off" /> Red
                         onions</label
                     >
                 </fieldset>
diff --git a/src/pat/selectbox/documentation.md b/src/pat/selectbox/documentation.md
new file mode 100644
index 000000000..02a48091d
--- /dev/null
+++ b/src/pat/selectbox/documentation.md
@@ -0,0 +1,5 @@
+## Description
+
+the __selectbox__ pattern adds ``data-option`` and ``data-option-value`` attributes on the parent element.
+If the parent element is not a ``<label>`` it wrapts itself within a ``<span>`` element.
+
diff --git a/src/pat/selectbox/index.html b/src/pat/selectbox/index.html
new file mode 100644
index 000000000..614722f4d
--- /dev/null
+++ b/src/pat/selectbox/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+        <title>Selectbox demo</title>
+        <script
+            src="/dist/bundle.js"
+            type="text/javascript"
+            charset="utf-8"
+        ></script>
+    </head>
+    <body>
+
+      <form>
+        <select class="pat-select">
+          <option value="true" selected>Bevat</option>
+          <option value="false">Bevat niet</option>
+        </select>
+
+        <br />
+
+        <label>
+        <select class="pat-select">
+          <option value="okay" selected>okay</option>
+          <option value="nicht okay">nicht okay</option>
+        </select>
+        </label>
+
+        <br />
+
+        <label class="pat-select">
+          <select>
+            <option value="ja" selected>ja.</option>
+            <option value="nein">nein.</option>
+          </select>
+        </label>
+
+        <br />
+
+        <input type="reset"/>
+      </form>
+
+    </body>
+</html>
diff --git a/src/pat/selectbox/selectbox.js b/src/pat/selectbox/selectbox.js
index 324bbb59b..47d3278bf 100644
--- a/src/pat/selectbox/selectbox.js
+++ b/src/pat/selectbox/selectbox.js
@@ -1,64 +1,54 @@
-/**
- * Patterns selectbox - Expose select option
- * for (un)checking.
- *
- * Copyright 2012-2014 Simplon B.V. - Wichert Akkerman
- * Copyright 2012 JC Brand
- * Copyright 2012-2013 Florian Friesdorf
- */
-
+/* Patterns selectbox - Expose select option for (un)checking. */
 import $ from "jquery";
-import registry from "../../core/registry";
+import Base from "../../core/base";
+import dom from "../../core/dom";
+
+const KEY_RESET = "__patternslib__pat_selectbox__reset";
 
-var selectbox = {
+export default Base.extend({
     name: "selectbox",
     trigger: ".pat-select",
-
-    init: function ($el) {
-        var $forms = $();
-        $el.each(function () {
-            if (this.form !== null) {
-                var $form = $(this.form);
-                if ($form.data("pat-selectbox.reset")) return;
-                $form.data("pat-selectbox.reset", true);
-                $forms = $forms.add(this.form);
+    all_selects: [],
+
+    init(el) {
+        el = dom.jqToNode(el);
+
+        if (el.form && !el[KEY_RESET]) {
+            $(el.form).on("reset.pat-selectbox", () => this.form_reset());
+            el[KEY_RESET] = true;
+        }
+
+        this.all_selects = dom.querySelectorAllAndMe(
+            el,
+            "select:not([multiple])"
+        );
+        for (const sel of this.all_selects) {
+            // create parent span if not direct child of a label
+            if (!sel.parentNode.matches("label")) {
+                dom.wrap(sel, document.createElement("span"));
             }
-        });
-
-        $el.find("select:not([multiple])")
-            .each(function () {
-                var $el = $(this);
-                // create parent span if not direct child of a label
-                if ($el.parent("label").length === 0) $el.wrap("<span />");
-                selectbox.onChangeSelect.call(this);
-            })
-            .on("change.pat-selectbox", selectbox.onChangeSelect);
-
-        $forms.on("reset.pat-selectbox", selectbox.onFormReset);
+            this.change_select(sel);
+            $(sel).on("change.pat-selectbox", () => this.change_select(sel));
+        }
     },
 
-    destroy: function ($el) {
+    destroy($el) {
         return $el.off(".pat-selectbox");
     },
 
-    onFormReset: function () {
+    form_reset() {
         // This event is triggered before the form is reset, and we need
         // the post-reset state to update our pattern. Use a small delay
         // to fix this.
-        var form = this;
-        setTimeout(function () {
-            $("select:not([multiple])", form).each(selectbox.onChangeSelect);
+        setTimeout(() => {
+            for (const sel of this.all_selects) {
+                this.change_select(sel);
+            }
         }, 50);
     },
 
-    onChangeSelect: function () {
-        var $select = $(this);
-        $select
-            .parent()
-            .attr("data-option", $select.find("option:selected").text());
-        $select.parent().attr("data-option-value", $select.val());
+    change_select(el) {
+        el.parentNode.setAttribute("data-option", el.querySelector("option:checked").text); // prettier-ignore
+        el.parentNode.setAttribute("data-option-value", el.value);
     },
-};
-
-registry.register(selectbox);
-export default selectbox;
+});
diff --git a/src/pat/selectbox/selectbox.test.js b/src/pat/selectbox/selectbox.test.js
new file mode 100644
index 000000000..194cb6d15
--- /dev/null
+++ b/src/pat/selectbox/selectbox.test.js
@@ -0,0 +1,85 @@
+import Pattern from "./selectbox";
+import registry from "../../core/registry";
+import utils from "../../core/utils";
+
+describe("pat selectbox tests", () => {
+    // Tests from the core.dom module
+
+    it("works as indented.", async (done) => {
+        const el = document.createElement("div");
+        el.innerHTML = `
+          <form>
+            <select class="pat-select sel1">
+              <option value="a" selected>A</option>
+              <option value="b">B</option>
+            </select>
+
+            <label>
+            <select class="pat-select sel2">
+              <option value="c" selected>C</option>
+              <option value="d">D</option>
+            </select>
+            </label>
+
+            <label class="pat-select">
+              <select class="sel3">
+                <option value="e" selected>E</option>
+                <option value="f">F</option>
+              </select>
+            </label>
+
+            <input type="reset"/>
+          </form>
+        `;
+
+        registry.scan(el);
+
+        const sel1 = el.querySelector(".sel1");
+        const sel2 = el.querySelector(".sel2");
+        const sel3 = el.querySelector(".sel3");
+
+        expect(sel1.parentNode.tagName).toBe("SPAN");
+        expect(sel2.parentNode.tagName).toBe("LABEL");
+        expect(sel3.parentNode.tagName).toBe("LABEL");
+
+        expect(sel1.parentNode.getAttribute("data-option")).toBe("A");
+        expect(sel1.parentNode.getAttribute("data-option-value")).toBe("a");
+
+        expect(sel2.parentNode.getAttribute("data-option")).toBe("C");
+        expect(sel2.parentNode.getAttribute("data-option-value")).toBe("c");
+
+        expect(sel3.parentNode.getAttribute("data-option")).toBe("E");
+        expect(sel3.parentNode.getAttribute("data-option-value")).toBe("e");
+
+        sel1.options["1"].selected = true;
+        sel1.dispatchEvent(new Event("change"));
+        sel2.options["1"].selected = true;
+        sel2.dispatchEvent(new Event("change"));
+        sel3.options["1"].selected = true;
+        sel3.dispatchEvent(new Event("change"));
+
+        expect(sel1.parentNode.getAttribute("data-option")).toBe("B");
+        expect(sel1.parentNode.getAttribute("data-option-value")).toBe("b");
+
+        expect(sel2.parentNode.getAttribute("data-option")).toBe("D");
+        expect(sel2.parentNode.getAttribute("data-option-value")).toBe("d");
+
+        expect(sel3.parentNode.getAttribute("data-option")).toBe("F");
+        expect(sel3.parentNode.getAttribute("data-option-value")).toBe("f");
+
+        const form = el.querySelector("form");
+        form.reset();
+        await utils.timeout(200); // wait for (timeout in pattern)*3 + a bit
+
+        expect(sel1.parentNode.getAttribute("data-option")).toBe("A");
+        expect(sel1.parentNode.getAttribute("data-option-value")).toBe("a");
+
+        expect(sel2.parentNode.getAttribute("data-option")).toBe("C");
+        expect(sel2.parentNode.getAttribute("data-option-value")).toBe("c");
+
+        expect(sel3.parentNode.getAttribute("data-option")).toBe("E");
+        expect(sel3.parentNode.getAttribute("data-option-value")).toBe("e");
+
+        done();
+    });
+});