A certain .aspx page renders a simple SELECT list with various OPTIONs. Some, but not all, of these OPTION elements will have a special style class applied to render them in a different color to reflect a particular distinct status.
Ultimately, this works, with a single frustrating exception. If the first OPTION within the SELECT is given the CLASS designation, IE11 will not render that option with the color specified in the corresponding CSS rule. When viewing the page within the IE11 dev tools, it appears that the rule is being applied, yet, visually, it isn't. If the particular OPTION appears as any other item in the SELECT, the rule works.
The solution at hand, a snippet of which is provided below, was modeled after a seemingly very similar case presented here:
How to change the text color of first select option
<style>
select {color: black;}
select option {color: black;}
select option.specialStatus{
color: red;
}
select option.specialStatus:first-child{
color: red;
}
</style>
..
<select>
<option class='specialStatus' value=1>Hi</option>
<option value=2>Bye</option>
</select>
The intent, in effect, is to say "render this SELECT with OPTIONs ordinarily in black, unless they are given the 'specialStatus' class. When 'specialStatus' is present, render the OPTION in red. The 'first-child' rule was an effort to overcome any default styling that may be present.
Oddly enough, this styling works 100% of the time in old, nasty IE8 - this behavior of the first OPTION not being honored is seen only in IE11. That's why the subject solution linked above seemed the obvious choice - it works, but obviously something in conjunction with the class designations is causing a problem. Help would be most appreciated in diagnosing exactly what's wrong.
Adding to my comment, the problem is that the select color is making the Hi value black when selected. To make it work, you'll need JavaScript. I updated #YuriyGalanter's fiddle to include the necessary JavaScript:
function changeSelectClass(e) {
this.classList.remove('specialStatus');
if (this.options[this.selectedIndex].className.indexOf('specialStatus') !== -1) {
this.classList.add('specialStatus');
}
}
document.getElementsByTagName('select')[0].onchange = changeSelectClass;
changeSelectClass.call(document.getElementsByTagName('select')[0]);
and CSS:
select { color: black; }
option { color: black; }
select.specialStatus, option.specialStatus { color: red; }
You could make it more generic by applying the same class(es) to the select as were applied to the option, but this answers the specific question asked.
Related
I want a select dropdown like this i want the options to have some bigger width and select should only show the symbol and as well change the baackground color on hover i re search and get to know that we cant give style to option 🤦♀️ its very sad to know but luckily i got this link https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select here they showed what i wanted at least most of except the selected symbol show only anyway what i am getting also cool
.select-selected {
background-color: DodgerBlue;
}
They are targeting a class selected select i look on the html but i cant find it but the color is changing perfectly they reason i cant copy it exactly i am using react styled component i need to understand and write a easy solution for this that link tutorial is so difficult anyone can explain or suggest me alternative of select
Note I am using react style component
export const NavbarSelect = styled.select`
border: none;
border-radius: 0px;
option{
background: #FFF;
width:114px;
height:45px;
}
`
i want to style the option here
You can't style all parts of the standard HTML select list box.
Is it crucial to have the classic HTML select element underlying?
If not, you could easily create your own ul. In react, you have to show the custom ul on click on the actual selected option (e. g. an input-like field). When clicked on an option, just set this option for your component and pass it to your form component.
Okay so I've been making website for my mom's business and stumbled onto an interesting thing I can't really find difference on, right now, since website is still in early development.(tried googling but no help)
So basically my question is:
What is the difference in css(and html) between;
container a:hover;
and
container:hover;
I mean it shouldn't be any different. In both cases, as long as there is only <a></a> type used like here, it will apply to everything:
#name of the button
The thing is here:
.nav-link-wrapper:hover {
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover {
color:black;
}
Why do I have to specify a that is within the class, to apply color, when I don't have to for manipulating borders.
Sry if it was asked. This is more of a beginner's question and I can't find anybody who already asked this.
If you set color in .nav-link-wrapper:hover, it will not affect since a tag has its own style. So in order to add style for that a tag, you will need to specify a.
If you see why you have to explicitly use a color property for your a tag is because of the Browser specific color property being applied on it. color and text-decoration is applied to it explicitly as shown in the image snippet below:-)
And that is true only with color property not with any other property. In the code snippet below I am setting font-size for the body and it is applied on the a tag.
body{
color:orange; /* Parent Not applied */
font-size:2rem; /* Applied to Child*/
}
<body>
Test Link
</body>
I am adding new feature to already running project and I need to use chosen dropdown for one of the dropdown. This feature will be added to navbar of site so the css will be applied globaly on entire site.
For Example:
<select id='mydropdown' name='mydropdown' multiple='true' class='chosen-select-dsbrd'>
Now I need to give this select dropdown a custom width and as per other posts here , here , and here I tried:
.chosen-container .chosen-container-multi {
width: 460px !important;
}
and
.chosen-select-dsbrd {
width: 460px !important;
}
The problem is, previous developers were using the chosen for their own features, so how can I change width of my dropdown without disturbing their dropdowns. As of now if I change css using above code it changes all chosen dropdown width across site. Any help appreciated, thanks in advance.
Edit: I have tried with ID, its not working as chosen dynamically adds display: none to my select dropdown and appends <div> with their dropdown code
I have a simple city drop down in which I want to use multiple selection option.
For it I used multiple attribute of select tag but by using it the drop down got converted to a box shaped area with multiple select option.
What I want is that drop down look should stay as it is i.e. on clicking the select drop down should appear and in it I can use multiple cities with CTRL and whose values then will be used in a php script.
I have seen multiple jquery scripts for it but I wanted to know if is there some simple way to do this instead of using any jquery or something.
Is there any simpler method to do so???
please try below code:
<select id="city" multiple="multiple" name="city[]">
<option>hawaii</option>
<option>michigan</option>
<option>southfield</option>
</select>
and you get multiple city value in php
echo $_POST['city'];
HTML dropdown is made that way, does not allow multiple selections but you can use some jquery plugin like this for doing that and it is much simpler than creating such plugin yourself.
In principle, the size=1 attribute in select would tell the browser to show just one option, and you could use scripting to change the value of the size property to create a dropdown effect. In practice, it mostly does not work.
A more practical approach is to set the height of the select element initially and then change the height on mouseover and when focused. Unfortunately browser behavior is not consistent in sizing the element, but the results might be tolerable. Note that the font size in options is reduced by default, so sizing is a bit tricky. In this example I simply set the font size to 100% so that the em unit can be used in a simple manner:
option { height: 1.3em; font-size: 100%; }
select { height: 1.3em; font-size: 100%; }
select:hover, select:focus { height: 13em; }
The result is a little too small on some browsers and a little too large on some, and IE does not show any arrow to indicate that it’s really a dropdown.
I am having tough time figure out how to change background color of jQuery UI Dialog.
I've seen many reference how to change/remove title bar but not entire background including those curvy corner.
Here is my try:
http://jsfiddle.net/dEvKb/11/
The problem is .ui-widget-content only applies to square area within the dialog but not including curvy corner.
I found a class .ui-corner-all class hoping it will color the entire background but only half of the dialog is colored. (you can see this in the jsfiddle)
Has anyone done this before?
you can use this way
http://jsfiddle.net/dEvKb/15/
You should set to all class background with use !important.
.ui-dialog,.ui-widget, .ui-widget-content, .ui-corner-all, .foo, .ui-draggable, .ui-resizable {background:yellow !important}
Use the css classes:
ui-dialog
Main container of whole thing
ui-dialog-title
This is where the title actually appears
ui-dialog-titlebar
Area where title of dialog would be if exist
ui-dialog-content
Area where your div is actually loaded
ui-resizable-handle
These divs are used to resize the dialog but are usually invisble according to your setup
ui-dialog-buttonpane
Here is where buttons would go if exist
ui-dialog-buttonset
This is where the buttons actually appear
Also, unlike answer given selected, take note, YOU DON'T HAVE TO USE !important.
If you want a direct call, set everything up and create your dialog. Load the page in Chrome or FF (chrome easier to read). Then simply open the dialog and select the element you want to change. Look at its CSS in your Browser's Developer Tools. You'll be able to see the exact line jqueryui uses to make it's css call. Simply copy that line into your own CSS and ensure it's loaded later and your dialog will get the new overwrite.
If you want to target a specific dialog you can do it this way:
$('#yourDialog').dialog(
{
autoOpen: false,
open: function(e) {
$(e.target).parent().css('background-color','orangered');
}
});
Use this class in css
.ui-dialog .ui-dialog-content {
border: 0;
padding: .5em 1em;
background: #ff0000;
overflow: auto;
zoom: 1;
}
Please be aware that you could also go and make your own custom CSS using this link in jQuery
http://jqueryui.com/themeroller/
jQuery allows us to make a custom-css. Please select the theme you would want from the gallery and hit the edit button, you will be able to change almost everything about the dialog box, as well as the rounded corners.
You then need to download the entire jQuery pack within it you will find css/custom-css folder just put in your css tag and it will be all sorted basically.
The above ways are also true as you will be able to change it but you will have to look for the classes and stuff like that in the CSS well jQuery does that for us in an easy way and it worked for me as well so you can try it too.
What I basically do is create two to three custom style sheets and then load them up and play with them and finally choose one for the website and discard the rest.
I hope this helps...
Short answer
your_stylesheet.css
.ui-widget-content { background: yellow; }
Make sure your stylesheet is included after the JQuery UI stylesheet, e.g.
your_webpage.html
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link href="your_stylesheet.css" rel="stylesheet" type="text/css"></link>
Long answer
To determine which class and style to override, you will need to inspect a tooltip. Show the tooltip:
$("#selector_for_item_with_tooltip").tooltip('open')
Right-click on the tooltip and choose "inspect". Scroll down in the "Styles" tab until you find the attribute you care about (background-color).
You can click on the value and type in a new value to verify that it will have the effect you desire.
To see the format you will need to use to override the format, click on the filename:line # on the upper-right to go to the .css file that defines the attribute (jquery-ui.css:802)
The format will be
.ui-widget-content
{
background: yellow;
}
Your .css file needs to use the same style and be included after this one (see "short answer", above).
People sometimes incorrectly add !important css suffix to bypass this requirement but that causes all kinds of other headaches.