Will Will - 20 days ago 5
CSS Question

Select option text disappears partially after adding css class



$("button").on("click", function() {
$("select option").each(function() {
$(this).addClass("heavyError");
});
$("select option:selected").attr("selected", false);
});

.heavyError {
color: red;
font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select style="width:480px; height:100px;" multiple>
<option value="test-ss">test-ss</option>
</select>
<button>test</button>





If run this in IE, the text gets cut off by the hyphen, however, it's working properly in Chrome. Not sure what's going on here. Is it a bug with IE or some sort?

Answer

Appending a ' ' to the select will force the select to "refresh", and fixes the issue in IE11. See here: https://jsfiddle.net/9kvcqc05/

$("button").on("click", function() {
	$("select option").each(function() {
  	$(this).addClass("heavyError");
  });
 
  $("select option:selected").attr("selected", false);
  $("select").append(' ');
});
.heavyError {
  color: red;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select style="width:480px; height:100px;" multiple>
<option value="test-ss">test-ss</option>
</select>
<button>test</button>

It seems this is just a weird IE-specific bug.

I solved this by referencing a really great answer by Jordan Gray, seen here