將自定義樣式應用於引導選擇.dropdown-menu.open

有沒有一種方法可以將自定義樣式應用到特定引導選擇控件的下拉菜單中，該選擇是基於它的ID？我有一個引導選擇控件調用myControl：將自定義樣式應用於引導選擇.dropdown-menu.open

<select name="named[]" class="selectpicker show-tick dropup" 
         data-dropupAuto="true" 
         data-container="#mainContainer" 
         id="myControl" data-width="90%" title="Select your data"></select>

當我點擊它，並且下拉打開，我想用CSS應用某些自定義樣式。我可以做到這一般使用：

.bootstrap-select.btn-group .dropdown-menu.open { 
width: 250px !important; 
overflow: auto !important; 
background-color: red !important; 
}

但這適用於我的應用程序中的所有引導選擇控件的樣式。我希望能夠爲一個特定的控制做到這一點。我試着給ID：

#myControl .dropdown-menu.open { 
width: 250px !important; 
overflow: auto !important; 
background-color: red !important; 
}

但它不起作用。對不起，如果這是一個愚蠢的問題，我不是很好的JavaScript和CSS，這是讓我有點瘋狂。提前致謝。

來源

2017-09-05 Pooja

你能發佈你的html嗎！ –

我做到了，我希望這就是你的意思..謝謝 – Pooja

我認爲這有助於片斷和我有同樣添加CSS

.myClass { 
 
    color: red; width:200px; 
 
} 
 

 
.myClass option { background:#000; color:#fff}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="named[]" class="selectpicker myClass show-tick dropup" data-dropupAuto="true" data-container="#mainContainer" id="myControl" data-width="90%" title="Select your data"> 
 
    <option>Hi</option> 
 
    <option>Hello</option> 
 
</select>

.myClass { 
    color: red; width:200px; 
} 

.myClass option { background:#000; color:#fff}

來源

2017-09-05 05:20:14

謝謝。最後設法通過添加.myClass .dropdown-menu .open { width：250px！important; overflow：auto！important; }選擇這個作爲接受的答案，因爲它與我所做的最接近 – Pooja

你可以通過使用jquery添加一個類來實現。檢查下面的代碼片段以供參考。希望能幫助到你。

$('#myControl').click(function() { 
 
    $(this).toggleClass('myClass'); 
 
});

.myClass { 
 
    color: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="named[]" class="selectpicker show-tick dropup" data-dropupAuto="true" data-container="#mainContainer" id="myControl" data-width="90%" title="Select your data"> 
 
     <option>Hi</option> 
 
     <option>Hello</option> 
 
    </select>

來源

2017-09-05 05:10:00

謝謝。但是這也將樣式應用於按鈕。我希望能夠將其應用於打開的下拉內容，有沒有辦法做到這一點？ – Pooja

如果您只想在打開下拉菜單時添加。你可以檢查更新的答案。 –

非常感謝你，這很有效，但它又一次將更改應用於按鈕onclick。最後設法做到這一點，修改一下，並給樣式爲.myClass .dropdown-menu.open在CSS中。 – Pooja

.bootstrap-select.btn-group [data-id="myControl"] + .dropdown-menu.open { 
width: 250px !important; 
overflow: auto !important; 
background-color: red !important; 
}

嘗試。

來源

2017-09-05 05:18:52

不工作，對不起：嘗試使用和不使用空格，但樣式不適用。如果我刪除數據ID，它可以工作..arghh – Pooja

喜試礦山，看看它是否有助於你與你的要求。

HTML：

<select class="form-control" id="sel1"> 
<option class="mystyle">1</option> 
<option class="mystyle">2</option> 
<option class="mystyle">3</option> 
<option class="mystyle">4</option>

CSS：

.mystyle{ 
color: red; 
}

的jsfiddle here。

來源

2017-09-05 05:22:38 jhek

謝謝，這工作得太好了，但我不想爲選項應用樣式我想爲整個下拉的事情做這件事，但這很有幫助。 – Pooja

將自定義樣式應用於引導選擇.dropdown-menu.open

回答

相關問題