选择选项中的Strikeout文本

时间:2015-08-18 22:11:22

标签: html css

我试图在选择选项中删除文本,但由于某种原因它无效。

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;}

颜色正在应用但不是文字装饰。我错过了什么吗?任何赞赏的建议。

期望:

选项&#39; Some Text 1&#39;和#39;一些文字3&#39;应该被删除。

3 个答案:

答案 0 :(得分:3)

这需要更多的代码和工作,你还需要使用JQuery和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>

答案 1 :(得分:2)

试试:

SELECT DISTINCT files.*
FROM
  files INNER JOIN transfers t1
  ON files.id = t1.file_id AND t1.status='failed'
  LEFT JOIN transfers t2
  ON file.id = t2.file_id AND t2.status<>'failed'
WHERE
  t2.id IS NULL
.strikeout {
  color: blue;
}

.sel:first-child{
   text-decoration: line-through;
}

答案 2 :(得分:0)

你可以使用像这样的单一代码来做到这一点lol:https://jsfiddle.net/byB9d/6225/ 只需将您的文字转换为单一代码,例如从此地点http://manytools.org/facebook-twitter/strikethrough-text/,然后将文字粘贴回您的html哈哈

<强> HTML

<select>
    <option value="1" class="strikeout text-style">S̶o̶m̶e̶ ̶T̶e̶x̶t̶ ̶1̶</option>
    <option value="2" disabled="true">Some Text 2</option>
    <option value="3" class="strikeout text-style">S̶o̶m̶e̶ ̶T̶e̶x̶t̶ ̶3̶</option>
</select>

<强> CSS

.text-style {color:blue;}