I want to know if the element is showing vertical scrollbars or not, and if it is possible to do this with CSS only.
This only needs to work for Firefox by the way.
If you mean using selectors to test, no, there isn't such a selector in standard CSS (because the presence of scrollbars is calculated during rendering), nor can I find any selectors in this list of Mozilla vendor extensions that do what you're looking for.
No, CSS cannot accomplish as this requires to be able to monitor the element, not apply styles.
Using jQuery
var element = $("#yourdiv");
if(element.get(0).scrollHeight > element.height()) {
console.log('scroll bar is visible');
}
Related
why ::marker pseudo-element not support all CSS properties like other pseudo-elements?
can anyone explain me in brief.
Found out today that ::marker pseudo-element not support all CSS properties like background, display, etc but "font-size", "color", and "content" properties are working like charm.
The CSS Lists specification explains:
NOTE: It is expected that future specifications will extend this list of properties and relax the restriction on which properties can take effect. However at the moment outside marker box layout is not fully defined, so to avoid future compatibility problems only these properties are allowed.
Because this selector selects marker of a list item. Like the buller for example. That means that it allows you only to customize the bullet, not the list itself. Thats why you cant apply properties like display, because you are effecting the marker itself. This can be helpful
Is there a CSS selector for things that are in view, i.e. visible within the viewport?
You have to use Javascript to achieve that. The modern way is to use getBoundingClientRect().
I am trying to simply style my select box so the text is centre aligned. It works in Firefox but not in Safari or Chrome. When inspecting the element in Chrome it says the text is centred, however this is not the case. Can anybody see why it is not centred in Chrome and Safari?
http://georgewoolfe.com/yogurtline1.html
It will not work. Your best best is to use a plugin. E.g select menu :http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
That actually replaces the select with a span but retains select functionality.
Well, styling tag is really hard. You have to test different browsers and OS, and hardly you will reach an uniform result.
http://bavotasan.com/2011/style-select-box-using-only-css/
I suggest you to use some alternative component or js replacement that emulate selects behaviour, if you want to style it in an easier way.
http://cssglobe.com/custom-styling-of-the-select-elements/
There's no totally cross browser way of centering the test of a <select> element using just css. Some browsers allow you to do it and some don't.
If you really have to have it centered then I would suggest that you look into using an alternative component like Select2 or Chosen.
Okay, so this is more of a question that has lots of solutions that are not CSS, but I'm looking for doing this more from a theoretical perspective. I have an application for it, but its not worth coding it out in any other way.
The (Fun) Question
How do you color the text of an element using the text of the element? I have an element, all on it's own, which will contain a hex value for a color, and I want the text to be that color, but I want to do it only using CSS (likely only can be done using CSS 3).
Sample HTML
<div class="color_contents">#0000FF</div>
So, I've tried to use the attr() with no success, but I'm not sure I'm using the right contents (I've tried text, textContent, and innerText to no avail). Doesn't need to be cross-browser, but just a way to accomplish it.
Currently, there is no way to use CSS to access an element's text content, not even with the CSS3 modules available today.
Regarding this:
So, I've tried to use the attr() with no success, but I'm not sure I'm using the right contents (I've tried text, textContent, and innerText to no avail). Doesn't need to be cross-browser, but just a way to accomplish it.
attr() only looks at element attributes (foo="bar"). Since text content isn't an attribute of an HTML element (despite being a member of the corresponding DOM object), you can't query for it using that function.
There isn't a similar function for accessing an element's text content.
You could do something like this. It's a bit hacky, but all CSS
div.color_0000FF:before{
color:#0000FF;
content: "#0000FF";
}
HTML
<div class="color_0000FF"></div>
Example: http://jsfiddle.net/s8vLy/
The content/attr CSS properties can only be used with :before and :after pseudo-elements.
CSS3 will support attr access from other properties, see https://developer.mozilla.org/en/CSS/attr.
However when/if CSS3 attr goes live, you will still not be able to acces the "contents" of a element from CSS, simply because thats not what CSS is designed for.
Bottom line, use javascript :)
My code creates CSS divs with dynamic names
i.e.
cke_record_body_19
cke_record_body_54
Is it possible to style all divs that contain the string cke_record_body_ in their name using CSS?
The best cross browser solution is to style them by adding a class to each div.
Can you just have your code give these divs a class="cke_record_body" attribute? Then you can just apply a style to them however you want and ignore the ids.
If you really have to this should work:
div[id*="cke_record_body_"] {
}
Keep in mind I believe this is CSS3 so I have no idea what current support is, but really this is the only way to do it in straight CSS without other libraries. If you are using jQuery or something see Nealv's answer.
sure:
$("[id^=cke_record_body]*").something()