I have a select element with class "chosen-select-no-results". This is a part of the CSS chosen. As a result of this I can select multiple values in a select menu. However, when i add this select menu inside a dialog box the select inherits properties from the dialog box and loses the properties of "chosen-select-no-results". Any way to solve this issue?
Update: This is the code:
<div id="dialog-2" title="Dialog Title goes here..." style="display:none">
<select data-placeholder="Empty by default" id="myCountries" name="Countries[]" multiple class="chosen-select-no-results" style="width:450px" tabindex="5">
<optgroup label="Countries">
<option id='us'>USA</option>
<option id='ca'>Canada</option>
.
.
.
</optgroup>
</select></div>
From a "get it done" perspective, you can use:
selector{
property: value !important;
}
and modern browsers will override the inheritance with the value marked !important. But you should really only use !important when you can't find a way to properly structure your CSS. Look at inheritance rules and change the way you are specifying your CSS selectors.
You could also use the initial keyword:
selector {
property:initial;
}
Donwside: doesn't work in IE - as far as I know.
http://www.w3schools.com/cssref/css_initial.asp
Related
I am using select2 plugin for dropdown list on angularjs application. I want to show text both left and right.
<select ng-model="selEmployee" id='selUser' name="selEmp" ng-disabled="currentmode == 'edit' || currentmode=='view'">
<option ng-repeat="employee in employees" value="{{employee.Ldap}}">
{{employee.FirstName}} {{employee.LastName}} ({{employee.Email}})
</option>
<option value="" style="display:none">Please select</option>
I want to show Firstname and lastname to the left side and email to the right.
Can you please help. Thanks in advance.
There are only a few style attributes that can be applied to an element.
This is because this type of element is an example of a "replaced element". They are OS-dependent and are not part of the HTML/browser. It cannot be styled via CSS.
There are replacement plug-ins/libraries that look like a but are actually composed of regular HTML elements that CAN be styled.
it's not possible, as the styling for these elements is handled by the user's OS. MSDN: Option
Except for background-color and color, style settings applied through the style object for the option element are ignored.
<select style="width:245px;">
<option value="rseleccionar">Seleccione..</option>
<option value="bs">Bienes Separados</option>
<option value="bm">Bienes Mancomunados</option>
</select>
I want to change the blue color of default for another.
Styling select and option tag is very limited.
This is because the way they are displayed may change according to the browser/the OS. Think about what happens when you click a select tag on your phone. You don't get a dropdown list as expected on a desktop browser. So you couldnt style something universal as it doesn't natively display the save everywhere.
Styling possibilities are: mainly on the select tag but very restricted on the option. You could for example disable the native style of the select box:
select {
appearance: none;
/* may need vendors prefixes. */
}
Other solution is: jQuery plugins that simulate select box using other HTML tags:
https://jqueryui.com/selectmenu/
https://github.com/marcj/jquery-selectBox
And all that Google may return you with keywords "jQuery select box" :)
Option elements are rendered by the OS, not HTML. You cannot change the style for these elements.
Try this, hope it'll work
<select class="hover_color" style="width:245px;">
<option value="rseleccionar">Seleccione..</option>
<option value="bs">Bienes Separados</option>
<option value="bm">Bienes Mancomunados</option>
</select>
.hover_color:hover { background-color: red; border:1px solid red }
Is there anyway to strike out text in a drop down. I'm making an commerce app and looking for a way to demonstrate that an item is on sale. I'd like to do this by showing the old price and the striking this out and showing the sale price next to it.
I tried something like this
<select>
<option value="1">Small Box 10.99</option>
<option value="2">Large Box <del>19.99</del> 15.99</option>
</select>
You could use the Unicode combining character U+0336 LONG STROKE OVERLAY:
"19.99".replace(/\d/g, function (digit) { return digit + "\u0336" })
Result: 1̶9̶.9̶9̶
(It doesn’t look so good when you apply it to the period; that’s why I left that out.)
Here are all the digits with the stroke applied, if you want to just copy them into your server-side script:
0̶1̶2̶3̶4̶5̶6̶7̶8̶9̶
This is not possible if you're using a standard HTML select. Any markup within the <option> tag will be ignored:
<!-- The style in the span tag is completely ignored -->
<option value="1"><span syle="color:red">Small</span> Box 10.99</option>
The closest you're going to get to your desired functionality with the HTML select is by using the "disabled" property. Example:
<select>
<option />
<option value="1" disabled="disabled">Small Box 10.99 (Original Price)</option>
<option value="1">Small Box 6.99 (Sale Price)</option>
</select>
Here's a working fiddle to demonstrate.
No. With HTML standard elements you can't have that kind of functionality. To solve that problem you have to create your own element.
I have 2 SELECT elements, but I only want to display the second if the first has a specific value.
I know how to do this with javascript, but I was hoping I could use an adjacent sibling selector to accomplish this with pure HTML/CSS:
<style>
select[name=select2] { display:none; }
select[value=show] + select[name=select2] { display:auto; }
</style>
<select name="select1">
<option value="show">Show Select 2</option>
<option value="hide">Hide Select 2</option>
</select>
<select name="select2">
</select>
Unfortunately, I can't get this to work. I imagine it's because value isn't a real attribute of a SELECT, but I'm not sure. Any ideas what is going on here?
Here's a fiddle to test with:
http://jsfiddle.net/rr24g/
no, totally impossible, because css is "cascading" you can't go upwards
/* pseudo code - doesn't work, just demonstrating the problem */
select[name=select1] > option[value=show][selected] ::parent:: + select[name=select2]
you need javascript!
I'm going to say "No". You're coding UI based on business logic specifically. CSS wasn't designed for that. Keep it in javascript.
You might be able to do something with :hover using the top level selects.
Otherwise, I think a js solution is in order.
I have a select menu like this:
<select name="mySelect">
<option value="250" selected="selected">250</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
</select>
It comes out looking different depending on OS and I would like it to have a different background. The problem is when I use a standard css background the arrow on the right of the select element remains visible.
select {
background: url(../images/bg_select.png);
}
I would also like to have different background colours when the select list has been opened. The default is often blue and white.
Edit: Looks like I'll have to use javascript. Are there any jQuery plugins to do this?
You may want to look at this: Cut & Paste DHTML Select menu. It uses Javascript to replace the select menu with custom HTML.
all a listener to the select and use jquery to trigger the class
add/remove classes should work fine