Strikeout text in Select option

Question

I am trying to strikeout the text in select option but, for some reason it is not working.

Fiddler: https://jsfiddle.net/99x50s2s/95/

HTML:

<select>
    <option value="1" class="strikeout text-style">Some Text 1</option>
    <option value="2" disabled="true">Some Text 2</option>
    <option value="3" class="strikeout text-style">Some Text 3</option>
</select>

CSS:

.strikeout {text-decoration:line-through;}
.text-style {color:blue;}

The color is getting applied but not the text-decoration. Am I missing anything? Any suggestions in appreciated.

Expectation:

The option 'Some Text 1' and 'Some Text 3' should be striked out.

Answer 1

that will take much more lines of code and effort, you also will need to use a JQuery and bootstrap.

$('body').on('click', '.option li', function () {
    var i = $(this).parents('.select').attr('id');
    var v = $(this).children().text();
    var o = $(this).attr('id');
    $('#' + i + ' .selected').attr('id', o);
    $('#' + i + ' .selected').text(v);
});
$(".disabledM").click(function(event) {
  event.preventDefault();
});

body {
    margin:20px;
}
.select button {
    width:100%;
    text-align:left;
}
.select .sel {
    position:absolute;
    right:10px;
    margin-top:10px;
}
.select:last-child>.btn {
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
}
.selected {
    padding-right:10px;
    text-decoration: line-through;
    
}
.option {
    width:100%;
}
a.disabled-link,
a.disabled-link:visited ,
a.disabled-link:active,
a.disabled:hover {
    background-color:#d9d9d9 !important;
    color:#aaa !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group-btn select" id="select1">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="true"><span class="selected"></span>  <span class="sel"></span>
    </button>
    <ul class="dropdown-menu option" role="menu">
        <li><s>Some Text 1</s>
        </li>
        <li class="disabledM">Some Text 2</li>
        <li><s>Some Text 3</s>
        </li>
    </ul>
</div>