I am using bootstrap-multiselect to add dropdown multiselect functionaility to selects but I do not like the way it looks and can't seem to overide the style.
I would like it to look like a normal bootstrap form control but adding these classes does nothing.
<h1>Normal BS select</h1>
<div class="input-group input-group-sm mb-2">
<select class="form-control form-control-sm" id="select1">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<h1>
Bootstrap multiselect
</h1>
<div class="input-group input-group-sm mb-2">
<select class="form-control form-control-sm" id="select2" multiple="multiple">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
I have created a JSfiddle to show the difference.
I have also tried to change the bootstrap-multiselect stylesheet but again nothing I change seems to work
EDIT:- It is the grey background and lack of border of the bootstrap-multiselect that I do not like
Bootstrap Multiselect is creating a button there which receives certain styles applied by classes like .multiselect. You can pretty easily override these in a way like the following:
button.multiselect {
background-color: initial;
border: 1px solid #ced4da;
}
Here, I'm resetting the background color of the button generated by Multiselect by going to its initial value, but you can set it to #ffffff; or something else. The border style is copied from the Bootstrap default for the .form-control class.
If you're not familiar with debugging with Devtools, you can start with Chrome's Devtools overview, or look specifically for tutorials on how to use the devtools or inspector for your browser of choice.
Here it is applied to your fiddle:
https://jsfiddle.net/qzdnkwos/36/
You can tweak as needed.
Related
I want to display the selected option in the same colour as the option itself.
<select>
<option value="1" style="color:blue">Blue</option>
<option value="2" style="color:red">Red</option>
</select>
The options are displayed correctly in blue and red colours, but once selected, they are black. Is it possible to display it in blue or red, matching the selected option?
PD: I know how to do it in JS, but I'm not sure if it could be done in CSS
This can be done with pure CSS with the :has pseudo class
select:has(option[value="1"]:checked) {
color: blue;
}
select:has(option[value="2"]:checked) {
color: red;
}
<select>
<option value="1">Blue</option>
<option value="2">Red</option>
</select>
If select has onchange it can modify dataset equal to value. Then css can reflect that. If this is part of a larger application, remove onchange and implement an event listener in js file
.blue,select[data-chosen='1']{
color:blue;
}
.red,select[data-chosen='2']{
color:red;
}
<select onchange="this.dataset.chosen = this.value;" data-chosen="1">
<option value="1" class="blue">Blue</option>
<option value="2" class="red">Red</option>
</select>
I have a select box like
But when I use the select box in css, it looks like below
how to get the large option box and width have to cover upto text.
You can just add it in the css file.
HTML:
<div >
<select>
<option value="0">Select:</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
</div>
And in css you add:
select, option {
width: 250px;
}
I have the following code example:
<label>
Enter your favorite cartoon character:<br />
<input type="text" name="favCharacter" list="characters" maxlength="50" style="width:95%;">
<datalist id="characters">
<option value="Homer Simpson">
<option value="Bart">
<option value="Fred Flinstone">
</datalist>
</label>
Is it possible to style "Bart" option, for example paint it with yellow -
style="color: yellow" ?
Browsers define their own styles for these elements (datalist, select, option) and you can't style them.
You can use CSS with using the attribute access:
option[value="Bart"] {
color: yellow;
}
this would change the color to yellow for <option value="Bart"> Tags
I am trying to create a simple label and select box for a form.
I want this: [LABEL] [SELECT BOX]. Inline. All on the same line. Simple, eh?
Yet when I use the inline form element from bootstrap, it wraps the box:
<form class="form-inline" role="form">
<label for="sort-values">Sort:
<select id="sort-values" class="form-control">
<option value="2">Distance</option>
<option value="3">Rating</option>
<option value="4">Price</option>
</select>
</label>
</form>
What am I missing? Example here: http://bootply.com/79458
The width of the element .form-control is the problem..
.form-control {
width: 100%;
}
It is currently at 100%.. if you want it to work, you can either remove the width completely.. or just specify a smaller width, such as 200px;
Forked example here
You can use two methods for linking label and select. First method: id for select and attribute for for label. Second: including select inside of label. Not necessary use both of them.
Code:
<form class="form-inline" role="form">
<label class="control-label" for="sort-values">Sort:</label>
<select id="sort-values" class="form-control">
<option value="2">Distance</option>
<option value="3">Rating</option>
<option value="4">Price</option>
</select>
</form>
Example: http://bootply.com/79462
I am using wicket framework and overriding appendOptionHtml of ListMultipleChoice
to generate below select tag and using CSS :before to place red * before option text
it is working fine in FF but not in IE.
CSS:
.required:before {
content: "*";
color: #8B2942;
}
HTML:
<select>
<option class="required" value="0">test1</option>
<option class="required" value="1">test2</option>
<option class="required" value="2">test3</option>
</select>
Can anyone please help or any other way to put red asterisk to my option text?
I have tried all DOCTYPE still not working.
The required notice belongs on the label of the select field, not the options. eg:
.required{color:#8B2942}
<label for="myselect"><span class="required">*</span> Title: </label>
<select id="myselect" name="myselect">
<option value="1">test1/option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>