As far as I'm aware, there is no standard to apply a [`<datalist>`][1] to random elements with the [`[contenteditable]`][2] attribute, or anything other than a input with the [`[list]`][3] attribute.  At best, you'd be beholden to how individual browsers choose to implement that spec.

Obviously, the best medicine is to convert to semantically correct html, but just adding that note for future visitors to do if possible, since that's not your use case.

A possible workaround is to spin up an `input` element during the `focusin` event, match the styling of the surrounding span, allow the native browser events to fire, and apply the updated value when the input loses focus.

Here's how that would look in JavaScript:

```js
document.addEventListener('focusin', function (event) {
	if (event.target.matches('[contenteditable]')) {
        var editable = event.target
        
        // get text
        var text = editable.innerText

        // create input
        var input = document.createElement("input");
        input.type = "text";
        input.className = "editable-mirror";
        input.setAttribute("list", "browsers");
        input.value = text;

        editable.appendChild(input);

		input.focus()
	}
});
document.addEventListener('focusout', function (event) {
    if (event.target.matches('.editable-mirror')) {
        var input = event.target
        var editable = input.closest("[contenteditable]")

        // get text
        var text = input.value;

        // destroy input
        input.parentNode.removeChild(input);

        // apply value
        editable.innerText = text;
    }
});
```

And some starter styles (although Your Mileage May Vary)

```css
[contenteditable] {
  position: relative;
  border: 1px solid silver;
  padding: 2px 5px;
  display: inline-block;
}

.editable-mirror {
    position: absolute;
    left: -1px;
    top: -1px;
    height: calc(100% + 2px);
    width: calc(100% + 7px);
    padding: 2px 5px;
    margin: 0;
    border: 0;
}
```

### Here's a working demo in Stack Snippets & [JSFiddle][4]





    document.addEventListener('focusin', function (event) {
    	if (event.target.matches('[contenteditable]')) {
            console.log('focused')

            var editable = event.target

            // enter edit mode
            editable.classList.add("editing")
            
            // get text
            var text = editable.innerText

            // create input
            var input = document.createElement("input");
            input.type = "text";
            input.className = "editable-mirror";
            input.setAttribute("list", "browsers");
            input.value = text;

            editable.appendChild(input);

            input.focus()
            
    	}
    }, false);
    document.addEventListener('focusout', function (event) {
        if (event.target.matches('.editable-mirror')) {
            console.log('blur')
            
            var input = event.target
            var editable = input.closest("[contenteditable]")

            // leave edit mode
            editable.classList.remove("editing")

            // get text
            var text = input.value;

            // destroy input
            input.parentNode.removeChild(input);

            // apply value
            editable.innerText = text;
        }
    }, false);



    [contenteditable] {
      position: relative;
      border: 1px solid silver;
      padding: 2px 5px;
    }

    .editable-mirror {
        position: absolute;
        left: -1px;
        top: -1px;
        height: calc(100% + 2px);
        width: calc(100% + 12px);
        padding: 2px 5px;
        margin: 0;
        border: 0;
        font: inherit;
    }




    <h2>Regular - Input + Datalist</h2>
    <label>Choose a browser from this list:
    <input type="text" list="browsers" placeholder="Edit Me" id="regular" /></label>

    <datalist id="browsers">
      <option value="Chrome"/>
      <option value="Firefox"/>
      <option value="Internet Explorer"/>
      <option value="Opera"/>
      <option value="Safari"/>
      <option value="Microsoft Edge"/>
    </datalist>

    <h2>Workaround - ContentEditable + Datalist</h2>

    <label>Choose a browser from this list:
    <span contenteditable list="browsers" name="myBrowser">edit me</span></label>



[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
[2]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable
[3]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-list
[4]: https://jsfiddle.net/KyleMit/j4frex23/

I would like to know if there's any hackable way anyone might know of which will allow an HTML [datalist][1] element to work with a `contenteditable` element and **not with an `<input>` element**. 

## Example code:

```html
<label>Choose a browser from this list:
  <span contenteditable list="browsers" name="myBrowser">choose</span> 
</label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>
```

[fiddle demo][2]

It would seem like it is bound to only with with `<input>` element.
In my situation I have javascript plugin which hides an input field and replaces it with a `span`, for some "special" things that can only be done with a regular DOM element, such as `span`. This span is `contenteditable` and acts is a simulation for the input it replaces, while the input is kept hidden.


  [1]: https://developer.mozilla.org/en/docs/Web/HTML/Element/datalist
  [2]: https://jsfiddle.net/rq2zL8qg/

html datalist for contenteditable (non-input tag)

The core problem faced by the implementation of the Paper Theme is it does so by styling the `<input type="checkbox" />` elements using `:before` or `:after` pseudo-elements. 

Per this the [W3C specs][14] and this answer in [can I use a pseudo-element on an input field?][1]

> **`:before` and `:after` render inside a container and `<input>`s can not contain elements**

The fact that it works in chrome is the exception, not the rule, but we're not out of luck ...

# Pure CSS Approach

So we'll want to avoid styling anything *within* the actual checkbox itself, but we can apply those same styles to the label instead, which will still toggle the checkbox that it describes.   

### **Step 1** - Label Based Toggle

We do have to restructure the HTML so that checkbox comes *before* the label, instead of *inside* it.  We'll do that so we can use the `:checked` and adjacent sibling selector `+` to conditionally style the label based on whether or not the checkbox is checked.



<pre><code><i>&lt;!-- Old Format --&gt;</i>
&lt;div class="checkbox"&gt;
  &lt;label&gt;
    &lt;input type="checkbox" value="check1"/&gt;
    Check Label Text
  &lt;/label&gt;
&lt;/div&gt;

<i>&lt;!-- New Format --&gt;</i>
&lt;div class="label-check"&gt;
   &lt;input type="checkbox" value="check1" <b>id="myCheck"</b>&gt;
   &lt;label <b>for="myCheck"</b>&gt;Check Label Text&lt;/label&gt;
&lt;/div&gt;
</code></pre>

>**Note**: In order for this solution to work, you do need to make sure that you have **valid HTML** with unique IDs for every input and corresponding `for` attributes in the labels that describe them.

At this point in time, we can ditch the inputs, and style the labels with our own `:before` pseudo elements that *look* like checkboxes or radio buttons.  To keep things simple for now, in step one, we can mimic the controls with the following Unicode Characters ... [☐][2], [☑][3], [⭘][4], [◉][5]

Here's an bare bones version with the basic gist of the CSS to style each label conditionally:



    input[type='checkbox'],[type='radio']     { display: none; }
    [type='checkbox']         + label::before { content: "\2610";}
    [type='checkbox']:checked + label::before { content: "\2611";}
    [type='radio']            + label::before { content: "\2B58";}
    [type='radio']:checked    + label::before { content: "\25C9";}

We can also improve on this baseline quite a bit by adding some colorization, hovering effects, cursor properties, transition effects, and text shadows to make the unicode characters look and feel like actual buttons.  

Here's a more fleshed out demo in [**jsFiddle**][6] and Stack Snippets:





    body {
      font-size:1.3em;
      color: #2b2b2b;
      background:white;
    }
    .label-check input {  display:none; }

    .label-check label::before {
      width: 1.4em;
      text-align: center;
      display: inline-block;
      cursor: pointer;
      color: black;
      transition: color .3s ease;
      text-shadow: 0px 0px 1px #cccccc;
    }
    .label-check label:hover::before {
      text-shadow: 0px 0px 1px #6286d0;
    }
    .label-check [type='checkbox']:checked + label::before,
    .label-check [type='radio']:checked    + label::before{ 
      color: #056dce;
    }

    .label-check [type='checkbox']         + label::before { content: "\2610";}
    .label-check [type='checkbox']:checked + label::before { content: "\2611";}
    .label-check [type='radio']            + label::before { content: "\2B58";}
    .label-check [type='radio']:checked    + label::before { content: "\25C9";}



    <h3>
      Inputs... we don't need no stinkin Inputs
    </h3>

    <div class="label-check">
      <div>
        <input type="checkbox" name="checkGrp1" id="check1_Opt1">
        <label for="check1_Opt1">A Label Here 1</label>
      </div>
      <div>
        <input type="checkbox" name="checkGrp1" id="check1_Opt2" checked>
        <label for="check1_Opt2">A Label Here 2</label>
      </div>
    </div>

    <div class="label-check">
      <div>
        <input type="radio" name="radioGrp1" id="radio1_Opt1">
        <label for="radio1_Opt1">Radio Label 1</label>
      </div>
      <div>
        <input type="radio" name="radioGrp1" id="radio1_Opt2" checked>
        <label for="radio1_Opt2">Radio Label 2</label>
      </div>  
    </div>



### **Step 2** - Apply Material Style to `label:before` with CSS

With the concept of using a the label's stylized pseudo elements as a toggle in play, we can apply Paper's styles / CSS instead of just `{ content: "\2610";}` to give our checkboxes a Material look and feel.

To do that, let's look at how the styles were *supposed* to work.  We can look at the source code that describes checks and radios on Github in  [bootstrap.css#L7182][7]

The `:after` element is being used to style the surrounding box/circle while the `:before` element adds the inner selection when the box is `:checked`.

Here are the high level styles for the **checkbox**:

[![Material Checkbox CSS][8]][8]

>**Note**: The check mark is made by rotating a rectangle 45 degrees and adding a white border to the bottom and right.

And here's a high level view of the styles for the **radio button**:

[![Material Radio CSS][9]][9]

>**Note**: The radio button container and inside is just a regular CSS circle (`border-radius:50%`) with varying sizes which can animate by scaling up or down.

So we'll migrate any pseudo elements found on the checkbox input to it's adjacent label like this:


<pre><code>/* old */ input[type="radio"]:before
/* new */ input[type="radio"] <b>+ label</b>:before
</code></pre>

After some careful conversion, here's a demo in [**jsFiddle**][13] and Stack Snippets:





    body {
      padding: 0 25px;
      font-size: 1.2em;
    }


    .checkbox, .radio {
        margin: 10px;
    }
    .checkbox, .radio {
        position: relative;
    }


    .label-check label {
      padding-left: 20px;
    }
    .label-check input[type="radio"],
    .label-check input[type="checkbox"] {
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
        opacity: 0;
        position: absolute;
        margin: 0;
        z-index: -1;
        width: 0;
        height: 0;
        overflow: hidden;
        left: 0;
        pointer-events: none;
    }
    .label-check input[type="radio"]:focus {
      outline: none;
    }
    .label-check input[type="radio"] + label:before,
    .label-check input[type="radio"] + label:after {
      content: "";
      display: block;
      position: absolute;
      left: -10px;
      top: 1px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      -webkit-transition: 240ms;
      -o-transition: 240ms;
      transition: 240ms;
    }
    .label-check input[type="radio"] + label:before {
        left: -8px;
        top: 3px;
    }
    .label-check input[type="radio"] + label:before {
      background-color: #2196f3;
      -webkit-transform: scale(0);
          -ms-transform: scale(0);
           -o-transform: scale(0);
              transform: scale(0);
    }
    .label-check input[type="radio"] + label:after{
      top: 1px;
      border: 2px solid #666666;
      z-index:1;
    }
    .label-check input[type="radio"]:checked + label:before {
      -webkit-transform: scale(0.6);
          -ms-transform: scale(0.6);
           -o-transform: scale(0.6);
              transform: scale(0.6);
    }
    .label-check input[type="radio"]:disabled:checked + label:before {
      background-color: #bbbbbb;
    }
    .label-check input[type="radio"]:checked + label:after {
      border-color: #2196f3;
    }
    .label-check input[type="radio"]:disabled + label:after,
    .label-check  input[type="radio"]:disabled:checked + label:after {
      border-color: #bbbbbb;
    }
    .label-check input[type="checkbox"]:focus {
      outline: none;
    }
    .label-check input[type="checkbox"]:focus + label:after{
      border-color: #2196f3;
    }
    .label-check input[type="checkbox"] + label:after {
      content: "";
      position: absolute;
      top: 2px;
      left: -10px; 
      display: block;
      width: 18px;
      height: 18px;
      margin-top: -2px;
      margin-right: 5px;
      border: 2px solid #666666;
      border-radius: 2px;
      -webkit-transition: 240ms;
           -o-transition: 240ms;
              transition: 240ms;
    }
    .label-check input[type="checkbox"]:checked + label:before {
      content: "";
      position: absolute;
      top: 2px;
      left: -3px;
      display: table;
      width: 6px;
      height: 12px;
      border: 2px solid #fff;
      border-top-width: 0;
      border-left-width: 0;
      -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
           -o-transform: rotate(45deg);
              transform: rotate(45deg);
      z-index:1;
    }
    .label-check input[type="checkbox"]:checked + label:after{
      background-color: #2196f3;
      border-color: #2196f3;
    }
    .label-check input[type="checkbox"]:disabled + label:after {
      border-color: #bbbbbb;
    }
    .label-check  input[type="checkbox"]:disabled:checked + label:after {
      background-color: #bbbbbb;
      border-color: transparent;
    }



    <h3>
     Material Label Based Checks
    </h3>

    <div class="label-check">
      <div class="checkbox">
        <input type="checkbox" name="checkGrp1" id="check1_Opt1">
        <label for="check1_Opt1">A Label Here 1</label>
      </div>
      <div class="checkbox">
        <input type="checkbox" name="checkGrp1" id="check1_Opt2" checked>
        <label for="check1_Opt2">A Label Here 2</label>
      </div>
    </div>

    <div class="label-check">
      <div class="radio">
        <input type="radio" name="radioGrp1" id="radio1_Opt1">
        <label for="radio1_Opt1">Radio Label 1</label>
      </div>
      <div class="radio">
        <input type="radio" name="radioGrp1" id="radio1_Opt2" checked>
        <label for="radio1_Opt2">Radio Label 2</label>
      </div>  
    </div>



# HTML/JS Approach

There are some other material implementations that have hit this target in a cross browser friendly way.  All of which typically rely on:

1.  **Hiding the actual `<input>` element**
2.  **Placing a stylized checkbox box inside of the label** 

In some cases,  this relies on formatting the HTML appropriately yourself at design time, or generating it when the site initializes.  

For example, [FezVrasta's Material Design for Bootstrap][10], in both [V3][11] and [V4][12] will take an HTML structure like this:



    <div class="checkbox">
      <label>
        <input type="checkbox"> 
        Notifications
      </label>
    </div>

And insert a new span when you call `$.material.init()` so the result looks like this:



<pre><code>&lt;div class="checkbox"&gt;
  &lt;label&gt;
    &lt;input type="checkbox"&gt;
    <b>&lt;span class="checkbox-material"&gt;
      &lt;span class="check"&gt;&lt;/span&gt;
    &lt;/span&gt;</b>
    Notifications
  &lt;/label&gt;
&lt;/div&gt;
</code></pre>

While this relies on the initialization to occur, it allows much more fine grained control of the CSS checkbox and radio button rather than shoving it all into pseudo elements.


  [1]: https://stackoverflow.com/a/4660434/1366033
  [2]: https://www.fileformat.info/info/unicode/char/2610/index.htm "Ballot Box U+2610"
  [3]: https://www.fileformat.info/info/unicode/char/2611/index.htm "BALLOT BOX WITH CHECK U+2611"
  [4]: http://www.fileformat.info/info/unicode/char/2b58/index.htm "HEAVY CIRCLE U+2B58"
  [5]: http://www.fileformat.info/info/unicode/char/25c9/index.htm "FISHEYE U+25C9"
  [6]: https://jsfiddle.net/KyleMit/xt4bm1sb/
  [7]: https://github.com/thomaspark/bootswatch/blob/v3.3.7/paper/bootstrap.css#L7182
  [8]: https://i.stack.imgur.com/vmtrX.png
  [9]: https://i.stack.imgur.com/L5wEL.png
  [10]: https://github.com/FezVrasta/bootstrap-material-design
  [11]: https://cdn.rawgit.com/FezVrasta/bootstrap-material-design/gh-pages-v3/index.html#checkbox
  [12]: https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/material-design/forms/
  [13]: https://jsfiddle.net/KyleMit/fj6n5vt2/
  [14]: https://www.w3.org/TR/CSS2/generate.html#before-after-content "W3C Specs"

According to [**Google's Material guidelines** for selection controls][1] (checkboxes, radio buttons, switches), these input fields should look like this:

[![Material Selection Inputs][2]][2]

The [Bootstrap Paper Theme for v3.x][3] (now called [Materia in v4][4]) is styled to hit this design target

In chrome, inputs are stylized correctly, but all other browsers merely fallback to native input controls, which disrupts the consistency of the design metaphor.

Here's an MCVE in [jsFiddle][6] / Stack Snippets that will work / fail depending on browser:





    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css" rel="stylesheet"/>


    <div class="checkbox">
      <label><input type="checkbox" value="check1"/> Check Opt 1 </label>
    </div>
    <div class="checkbox">
      <label><input type="checkbox" value="check2" checked/> Check Opt 2</label>
    </div>

    <div class="radio">
      <label><input type="radio" value="radio1" name="grp1" />Radio Opt 1</label>
    </div>
    <div class="radio">
      <label><input type="radio" value="radio2" name="grp1" checked/>Radio Opt 2</label>
    </div>



And here how the previous code fares in each browser:

[![Browser Compatability][5]][5]


Is there a possible workaround for this or are we at the mercy of the browser to style inputs how they deem fit?

This question was also asked on the project's issues page in [github issue #497][7], but closed citing browser incompatibility

  [1]: https://material.io/guidelines/components/selection-controls.html
  [2]: https://i.stack.imgur.com/sD3FL.png
  [3]: https://bootswatch.com/3/paper/#forms
  [4]: https://bootswatch.com/materia/#forms
  [5]: https://i.stack.imgur.com/oTSXZ.png
  [6]: https://jsfiddle.net/KyleMit/c8tpo5ep/
  [7]: https://github.com/thomaspark/bootswatch/issues/497