Jquery 覆盖引导标签
我试图找出如何覆盖默认引导代码。我想要一个工作片段,它支持浮动标签。然而,标签在Jquery和css中是有目标的,但是bootstrap使用它的默认标签。我甚至尝试给标签一个ID或类,但它仍然不起作用Jquery 覆盖引导标签,jquery,css,Jquery,Css,我试图找出如何覆盖默认引导代码。我想要一个工作片段,它支持浮动标签。然而,标签在Jquery和css中是有目标的,但是bootstrap使用它的默认标签。我甚至尝试给标签一个ID或类,但它仍然不起作用 <div class="row p-5"> <div class="col-3"> <label class="label-te
<div class="row p-5">
<div class="col-3">
<label class="label-test-new">Floating label</label>
<select id="select" class="js-select" multiple>
<option>Sed pulvinar erat efficitur turpis dapibus mattis.</option>
<option>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</option>
<option>Nam vitae ipsum rutrum, posuere lorem non, aliquet libero.</option>
<option>In faucibus lorem sed sem maximus ultricies.</option>
<option>Vestibulum pellentesque dui sed quam vulputate volutpat.</option>
<option>Nunc cursus massa non augue ultrices, in placerat massa ultrices.</option>
</select>
</div>
</div>
.label-test-new {
&.selected {
top: -20px;
font-size: 12px;
transform: translateY(0);
}
font-size: 16px;
color: #C2185B;
position: absolute;
z-index: 1;
top: 50%;
left: 25px;
transform: translateY(-50%);
transition: all 0.2s ease 0s;
}
$('.js-select').select2().on('select2:open', (elm) => {
const targetLabel = $(elm.target).prev('label');
targetLabel.addClass('selected');
}).on('select2:close', (elm) => {
const target = $(elm.target);
const targetLabel = target.prev('label');
const targetOptions = $(elm.target.selectedOptions);
if (targetOptions.length === 0) {
targetLabel.removeAttr('class');
}
});
使用
!重要信息
要覆盖
或者使用属性style
或者在css中使用div>div>label
您可能需要设置!关于另外两项技术,很重要。不确定你在问什么或者你试过什么,但是如果有帮助,你的
@Html.LabelFor'会创建Html
[DisplayName of RTMFlag property]`-这样你就可以把标签或标题标签或标签[for=Request\u RTMFlag]
或$(elm.target).prevAll('label').first()
注意,.prev(选择器)
并没有做它看起来应该做的事情(我在这里看到了很多)-它做的是.prev().filter(选择器)
-不是.prevAll().filter(选择器)。first()
-即它获取上一个元素,如果它与选择器匹配,则返回它-它没有“查找”匹配的上一项。在您的情况下,与elm.target
相关的是select2
控件,该控件插入在select
-so$(elm.target)之后。prev()
将是select
控件,因此永远不会是标签。更多信息(上一步/下一步工作相同)谢谢提示。只要我能找到一种方法来覆盖影响我自己css标签更改的默认引导标签,我就会尝试一下。英雄联盟
@Html.LabelFor(model => model.Request.RTMFlag, new { @class = "header-label" })