0

I am trying to add a check box (in form of a pseudo-element) alongside every select's option tag. That works fine on the latest browsers like Chrome, Firefox but not on IE11.

IE11 simply crosses out all the pseudo element's properties and I have read in other answers that it is a debugger bug on IE11 and my content should be rendered

.multiSelectCheckbox {
  overflow: auto;
  width: 100px;
}

.multiSelectCheckbox option::before {
  content: "\2610";
  width: 20px;
  text-align: center;
  display: inline-block;
}

.multiSelectCheckbox option:checked::before {
  content: "\2611";
  width: 20px;
  text-align: center;
  display: inline-block;
}
Select one:
<select class="multiSelectCheckbox" multiple>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

I am not sure what next can be done, any inputs would be appreciated. I am also attaching a link to JSFiddle (which this IE11 doesn't support either) here.

Abhishek
  • 63
  • 1
  • 7
  • Read this thread: https://stackoverflow.com/questions/27875232/ie-crossing-out-pseudo-element-css – Sana Mumtaz Jul 07 '21 at 09:36
  • As a sidenote to the linked duplicate: Note, that Microsoft deprecates the IE starting at the 17th August 2021 and will be finished to be deprecated at the 30th Novemeber 2021. Windows 11 does not even contain IE anymore and as such the removal of IE through Windows/Office 365 updates will not be delayed. It might be wasted efford to specifically support IE at this point. – tacoshy Jul 07 '21 at 09:50
  • I have already visited that stack overflow question, not that I haven't tried those but they didn't work for me. – Abhishek Jul 07 '21 at 10:03
  • tacoshy I agree with you, utilizing energy to support IE is no more worth it. However, I am stuck on enterprise application which still needs to support IE because people resist changes. Thanks anyways. – Abhishek Jul 07 '21 at 10:05

1 Answers1

1

It doesn't work in IE because IE doesn't allow anything other than <option> tag inside a <select> box. For more information, you can refer to this answer.

If you want to personalize the select box, you can use <select> with <label>. You can refer to the multiple select sample code below which works well in IE and other browsers:

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
  display: none;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: block;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}
<form>
  <div class="multiselect">
    <div class="selectBox">
      <select>
        <option>Select an option</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div id="checkboxes">
      <label for="one">
                    <input type="checkbox" id="one" />1
                </label>
      <label for="two">
                    <input type="checkbox" id="two" />2
                </label>
      <label for="three">
                    <input type="checkbox" id="three" />3
                </label>
    </div>
  </div>
</form>
Yu Zhou
  • 11,532
  • 1
  • 8
  • 22
  • It's quite unfortunate that IE doesn't support anything other than option tag inside select. This could be a decent alternative, although this solution will not work for me as I am limited by the submit handler. – Abhishek Jul 09 '21 at 16:02