发表新帖
发表新帖

CSS pseudo elements in select tag options in Internet Explorer

后端 未结
关注
2 1115
别跟我提以往
别跟我提以往 2021-01-05 08:11

I\'m trying to add some CSS ::before content to the tags of a

提交评论
  •  加载中...
  • 心在旅途
    2021-01-05 08:44

    First Lets get one thing straight we can't create what you desire in IE because it doesn't allow anything other than <option>,<optgroup> tags inside a <select> box.

    This is much of a workaround I can get using CSS only method in my opinion. If you prefer script there are plenty alternatives even select2 is one of the most used plugin for this type of customizations.

    I Have used [type="checkbox"] for attain this result

    jQuery is only being used to show the value.

    var multyVal = [];
$('.multiple input[type="checkbox"]').each(function() {
  if ($(this).is(':checked')) {
    var Tval = $(this).val();
    multyVal.push(Tval);
  }
});

console.log($('select').val(), multyVal);
    select>option::before {
  display: inline-block;
  width: 10em;
}

select>option:checked::before {
  content: "SELECTED: ";
}

select>option:not(:checked)::before {
  content: "excluded: ";
}

.multiple {
  height: 60px;
  display: inline-block;
  overflow-y: scroll;
  background: #d4d4d4;
  width: 10em;
  border: 1px solid #999;
  margin-left: 10px;
}

.multiple [type="checkbox"] {
  display: none;
}

.multiple label {
  width: 100%;
  float: left;
  font-size: 13px;
  text-align: right;
  background: #fff;
}

.multiple label::before {
  display: inline-block;
  float: left;
  font-family: arial, san-sarif;
  font-size: 11px;
}

.multiple [type="checkbox"]:checked+label::before {
  content: "SELECTED: ";
}

.multiple [type="checkbox"]:checked+label {
  background: #666;
  color: #fff;
}

.multiple [type="checkbox"]:not(:checked)+label::before {
  content: "excluded: ";
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select multiple>
  <option value="1" selected="selected">1</option>
  <option value="2" selected="selected">2</option>
  <option value="3" selected="selected">3</option>
  <option value="4" >4</option>
  <option value="5" >5</option>
</select>


<div class="multiple">
  <input type="checkbox" name="multiple" value="1" id="rad1" checked="checked">
  <label for="rad1">1</label>

  <input type="checkbox" name="multiple" value="2" id="rad2" checked="checked">
  <label for="rad2">2</label>

  <input type="checkbox" name="multiple" value="3" id="rad3" checked="checked">
  <label for="rad3">3</label>

  <input type="checkbox" name="multiple" value="4" id="rad4">
  <label for="rad4">4</label>

  <input type="checkbox" name="multiple" value="5" id="rad5">
  <label for="rad5">5</label>
</div>

    Fiddle in case you want one.

    Hoping this would come handy for you guys...

    0 讨论(0)
    •  看不清?
    提交回复
    热议问题