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;
}
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 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.
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'm currently experiencing the bad sides of JQM. I've got say two drop down list controls and I want to add different width to them depending on their class. How can I do it?
<asp:DropDownList runat="server" ID="ddlWidth1"
data-theme="e" </asp:DropDownList>
<asp:DropDownList runat="server" ID="ddlWidth2"
data-theme="e" </asp:DropDownList>
After rendering the HTM, JQM sets some classes and I can set the ddl's width like that:
.ui-select{
width: 225px;
}
But this makes both ddl's width the same. Adding css classes to the ddls won't help, because I'm losing these classes after the HTML is rendered.
This can be done easily, select box must be wrapped into appropriate data-role="fieldcontain" DIV. They are made specially for this purpose. Through them any inner form element can be modified easily.
Working example: http://jsfiddle.net/Gajotres/FvQ5c/
HTML:
<div data-role="fieldcontain" id="ddlWidth1">
<select>
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
<div data-role="fieldcontain" id="ddlWidth2">
<select>
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
CSS:
#ddlWidth1 .ui-select {
width: 225px;
}
#ddlWidth2 .ui-select {
width: 100%;
}
I have a form with a drop down list of venues and a submit button.
They are supposed to be on the same line, but since the list of venues is dynamic, it could become too long and push the button down.
I was thinking of setting a max-width property to the select, but I'm not clear whether this will work in all browsers. Do you have any suggestions on a workaround?
<form action="http://localhost/ci-llmg/index.php/welcome/searchVenueForm" method="post" class="searchform">
<select name="venue">
<option value="0" selected="selected">Select venue...</option>
<option value="1">venue 0</option>
<option value="2">club 1</option>
<option value="3">disco 2</option>
<option value="4">future test venue</option>
</select>
<input type="submit" name="" value="Show venue!" class="submitButton" />
</form>
css:
.searchform select {
max-width: 320px;
}
.searchform input.submitButton {
float: right;
}
If the venues are generated on the server side, you can use your server-side scripting to cut them down to a specific maximum character count.
When using pure CSS I'd also try setting overflow:hidden, both on the select and the option elements. Also try setting max-width on the option element. When it works in all non-IE, you can use the usual scripts to add max-width support for IE.
try:
fieldset select {
width: auto;
}