Issue at hand: The current problem lies in the fact that the selected option's background does not expand to fit the width of the option text, resulting in a situation where if the background is white, the remaining text is not visible. How can this be rectified? I am currently using Chrome, but I would like this solution to also apply to Firefox and IE.
Here is the HTML code snippet:
<select multiple="" class="h-scrollable form-control">
<option ng-repeat="elem in list">
{{elem}}</option>
</select>
This is the CSS associated with it:
.h-scrollable
{
width: 350px;
height: 150px !important;
overflow: auto;
margin-right:20px;
font-size: medium;
}
.h-scrollable:focus
{
height: 150px !important;
overflow: auto;
margin-right:20px;
font-size: medium;
background-size: 100%;
background: pink;
}
.h-scrollable option
{
/*width: 350px; */
}
.h-scrollable option:checked
{
/*width: 400px; THIS FIXES THE PROBLEM FOR A TEXT OF WIDTH = 350px; I want a general solution that will work for any length of text*/
}