I am trying to put custom styling only on the visible item when the drop down is closed, but not the items inside the drop down.
To do this, I put custom styling on select, then undo them on option. For example, I have font-style: italic set on a select element. But webkit browsers and IE10 seems to ignore font-style overrride.
HTML
<select>
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
</select>
CSS
select {
color: red;
font-style: italic;
}
option {
color: black; // undos color:red
font-style: normal!important; // This should undo the italic font style.
}
jsFiddle
Why do those browsers ignore the font-style override even with !important? How can I fix this?
Select boxes have very poor css styling support on all browsers.
To have total control of select box styling you will have to use a javascript solution to replace the select box with something that can be styled. http://www.jankoatwarpspeed.com/reinventing-a-drop-down-with-css-and-jquery/ is one option, or you might be best off looking at a jQuery plugin or Bootstrap.
What I found through Google was that the option elements are in fact styled by the OS, and can therefore not be styled through CSS (without JavaScript hacks or such).
Related
I'm already using various font-awesome icons on a website.
I'd like to add icons to social media links within my blog posts without having to add them manually to every link.
The structure of a blog post is as follows
<div class="blog-post>
<p>This is some text with a social media link in it</p>
</div>
How can i target these links adding a FA icon using css?
To target a twitter href you can use this CSS selector;
[href*="twitter"]
The * indicates the proceeding value must appear somewhere within the attribute's value. In this case it will target any URL containing the string 'twitter'.
Combining this with the :after selector will place something after the targeted link.
[href*="twitter"]:after
To combine this with font-awesome you would do something like this, remembering to limit it to the blog-post class;
.blog-post [href*="twitter"]:after {
font-family: FontAwesome;
content: "\f099"; // twitter icon
text-decoration: none; // removes underline from the icon in some browsers
display: inline-block; // removes underline from the icon in some browsers
padding-left: 2px;
}
Use :after in your CSS block and write like:
.blog-post:after {
font-family: sans-serif; //or any other you want
content: "\f099"; // twitter icon
............. //other stuff
So I have a universal selector in my CSS file to change a few things like font-family and color, as those rules can be applied to just about anything with one or two exceptions:
*
{
font-family: "Roboto", Sans, Arial, serif;
color: white;
outline:none;
}
One of those cases turns out to be select boxes, which are somewhat configurable in IE.
The white text color conflicts with the natural white background of the select box, so I added the following rule after the universal selector:
div#cart div.donate p select
{
color: black !important;
}
But IE 9 still uses the universal rule over the targeted rule. Why?
Here's a JSFiddle demonstrating the problem.
It's not that the universal rule has higher specificity, it's that select is not going to style the text color in IE9.
From your JSFiddle, #gift-sel option will style that text in IE9, as IE9 is relying on option instead of select to style the color.
Is it possible to effect styles for descendants of a custom class only? I'd like to override some jQuery UI styles for the descendants of my DOM element only.
Something like
.myStuff .ui-button {font-size: 0.7em !important;}
<div class="myStuff">
<input type="button"></input> !-- jQuery UI class .ui-button
</div>
<input type="button"></input> !-- .ui-button not effected by my .ui-button style
I've tried the child selector (>) but it stops at the first level :(. I actually thought the double class syntax with the space was the correct one...but it doesn't work either.
These are the exact selectors I'm trying to override from jQuery UI:
.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; }
.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; }
.ui-widget-content a { color: #222222/*{fcContent}*/; }
.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/; background: #cccccc/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; color: #222222/*{fcHeader}*/; font-weight: bold; }
.ui-widget-header a { color: #222222/*{fcHeader}*/; }
I really just want to change the font size...I'll try to calculate it per your example, but I didn't have any luck yesterday :(.
You CSS looks alright, that should work, however I believe that you might be a victim of the CSS specificity. If you open up the jQuery UI stylesheet files, I believe you will see that the selector of the CSS rule you want to override is more specific than your CSS rule, thus has the upper hand and will be used in favor of your rule.
To be able to override it, you will have to add a CSS-rule of your own that has a greater specificity than the rule provided by jQuery UI.
Update
It is hard to give an exact example of how to override the rule in this case, since we don't know how the selector looks for the rule that we want to override. However, the general idea is that you will have to calculate the specificity of the rule that you want to override (refer to the Smashing Mag article linked above, on how to do this) and then make sure that your rules specificity is greater than the specificity of the rule you want to override. There are several ways to accomplish this, add extra classes or IDs to your selector for instance.
I guess the easiest way in your case would be to open up the jQuery UI stylesheet, find the rule that you want to override, copy the exact selector that they are using, use that selector and prepend it with your .myStuff class, and you should have a rule that is more specific than the one provided by jQuery UI.
Also, I would NOT recommend using !important to solve this problem. This is my personal opinion, but if you start using !important, you might be in for a world of pain later on when you try to modify your CSS. Throubleshooting faulty layouts can be really tough if you have rules specified with !important that break the normal flow of your CSS.
Yes, your example will work.
.myStuff .ui-button {some custom style}
However, check the dom with Chrome's developer tools (or FF or IE's) to verify that you are using the correct selectors. jQuery UI can add a great deal of dom elements for various widgets.
using jquery-1.6.1.min.js and jquery-ui-1.8.13.min.js.
I have a textbox sitting inside a jquery dialog
<div class="chat-response">
<input class="chat-response-textbox" name="chat-response-textbox" placeholder="Type message here">
</div>
I have some associated css which I have made the font size intentionally large:
.chat-response-textbox
{
font-size: 20px;
font-family: Arial;
}
However when running in Chrome/IE the font size doesn't come out as 20.
In Chrome I can see the style is being taken from jquery.ui.theme.css
Elements Window
Styles Window
Why is this occurring given I explicitly assign a class to the input element?
It's all about the selector specificity. The most-specific selector wins; in this case that's .ui-widget input.
Just make your selector more specific than that one, and it'll work:
.ui-widget input.chat-response-textbox
{
font-size: 20px;
font-family: Arial;
}
Try changing it to
input.chat-response-textbox
That makes your style more specific, which should override JQuery UI.
I have a plugin which outputs a profile section, and I plan to wrap it with an ol>li element. I want to style the list numbers using a different font size/style/color. But if I do that the font style will propagate/cascade into the profile. I don't want to restyle every text inside the profile again. So is it possible to prevent the font style from propagating into the descendant elements?
<style>
#rank li{
font-size:50px;
font-style: italic;
font-family: serif;
font-weight: bold;
width:70px;
margin-right:10px;
text-align:center;
}
</style>
<ol id="rank">
<li>
<div class="profile">
<!-- contains complex stuffs including tables, floated div for displaying profiles-->
</div>
</li>
</ol>
EDIT:
Sorry, I over exaggerated about 'restyling every text again'. I think if I need to make profile style unaffected again, I would need to know the default font styles outside the ul, and apply them in the div. It's not much work, but in the future, one need to modify two places to keep the overall style consistent.
Sorry, but no. All font properties cascade (the "C" from CSS) into all child elements and there is no way to prevent it. You're going to have to reset the properties on the child elements if you don't want the same font.
One thing you can, potentially, do is not actually change the font on the <li>, but on a container near it. This will only work in newer browsers, if it works for you, great :) :
ol {
list-style-type : none;
}
ol > li:before {
content : counter(list_counter) " ";
counter-increment : list_counter;
float : left;
font-family : verdana;
}
ol:first-child {
counter-reset: list_counter;
}
You could "reset" the font style on all child elements. It's not actually resetting but it should work with the universal selector. But be carefull since this will actually enforce the font on all child elements, so if you selector is more specific than others it might in the end still affect other elements.
Check this fiddle for an example: http://jsfiddle.net/79ZK5/1/
As I understand this is related to the selector priority that you can use to override the style. Have a look here to understand the Priority of Styles. If you specify the style in your html that would get the highest priority.