How to add checkboxes to Multi Select in IE 11

I want to add checkboxes via css to a Multi Select using IE 11. The css I use works in Edge etc. , but does not for IE 11.

CSS and code:

<style>
option:before 
{
    content: "☐ "
}

option:checked:before 
{
    content: "☑ "
}

<select class="ddlRole" id="ddlRole" style="width: 810px;" size="6" multiple="">
    <option value="1">Administrator</option>
    <option selected="selected" value="2">Manager</option>
    <option value="3">User</option>
    <option selected="selected" value="4">Sub Manager</option>
    <option value="8">new role test 5</option>
</select>

Alternatively I'll use a table with 2 columns, the first being a checkbox column, the next the text/name of the option. Possibly even an expanded Ul with Li?, Though I really would rather not.

Thanks