CSS pseudo elements in select tag options in Internet Explorer

后端未结

关注

 2  1117

别跟我提以往 2021-01-05 08:11

I\'m trying to add some CSS ::before content to the tags of a 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: ";
}

Fiddle in case you want one.

Hoping this would come handy for you guys...

0 讨论(0)

查看其它2个回答