I've been trying awhile to implement this mootools tooltip sample on my site, the problem is I am using mootools 1.4 (mootools-core-1.4.1-full-compat.js) and the example using classname i.e.
var Tips4 = new Tips($$('.Tips4'), {
className: 'custom'
});
won't work for me. I can see the text but no image, firebug net tab doesn't show any asset missing.
I do have the effect I want using the other samples on the page but as far i can tell this locks me into a single style for tooltips.
var Tips1 = new Tips($$('.Tips1'));
which then has the css setup like so
.tool-tip {
color: #fff;
width: 139px;
z-index: 13000;
}
.tool-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #9FD4FF;
padding: 8px 8px 4px;
background: url(bubble.png) top left;
}
.tool-text {
font-size: 11px;
padding: 4px 8px 8px;
background: url(bubble.png) bottom right;
}
If custom class method won't work in 1.4
Am i correct in assuming using this 2nd method I cant have 2 separate tooltip styles on the page? In effect the .tool-* styles are reserved? I've tried something like
.MyOtherTipStyle .tool-title
{
//etc
}
.MyOtherTipStyle .tool-text
{
//etc
}
but irrespective of class assigned the same
.tool-title
.tool-text
styles are only ever applied.
Thanks,
The demo seems to use a different version of Mootools More, here is the right way to make your css (1.4.2):
.custom { }
.custom .tip-top { }
.custom .tip { }
.custom .tip-title { }
.custom .tip-text { }
.custom .tip-bottom { }
Here is an updated version of your JSFiddle, using the previous format: http://jsfiddle.net/3By77/4/.
Additionally, you forgot to activate Mootools More in JSFiddle, that's why it didn't work.
Related
I am really stoked about the HTML5 date picker.
The caveat is that I don't see or foresee much in the way of applying colors to the picker itself which is going to make the use of the datepicker kind of a deal-breaker on most sites. The <select> suffers from widespread JavaScript-replacement hacks for the simple reason that people can't make it pretty.
So are there any known styling options for the HTML input of type='date'?
The following eight pseudo-elements are made available by WebKit for customizing a date input’s textbox:
::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator
So if you thought the date input could use more spacing and a ridiculous color scheme you could add the following:
::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: silver; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: orange; }
<input type="date">
Currently, there is no cross browser, script-free way of styling a native date picker.
As for what's going on inside WHATWG/W3C...
If this functionality does emerge, it will likely be under the CSS-UI standard or some Shadow DOM-related standard. The CSS4-UI wiki page lists a few appearance-related things that were dropped from CSS3-UI, but to be honest, there doesn't seem to be a great deal of interest in the CSS-UI module.
I think your best bet for cross browser development right now, is to implement pretty controls with JavaScript based interface, and then disable the HTML5 native UI and replace it. I think in the future, maybe there will be better native control styling, but perhaps more likely will be the ability to swap out a native control for your own Shadow DOM "widget".
It is annoying that this isn't available, and petitioning for standard support is always worthwhile. Though it does seem like jQuery UI's lead has tried and was unsuccessful.
While this is all very discouraging, it's also worth considering the advantages of the HTML5 date picker, and also why custom styles are difficult and perhaps should be avoided. On some platforms, the datepicker looks extremely different and I personally can't think of any generic way of styling the native datepicker.
FYI, I needed to update the color of the calendar icon which didn't seem possible with properties like color, fill, etc.
I did eventually figure out that some filter properties will adjust the icon so while i did not end up figuring out how to make it any color, luckily all I needed was to make it so the icon was visible on a dark background so I was able to do the following:
body { background: black; }
input[type="date"] {
background: transparent;
color: white;
}
input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(100%);
}
<body>
<input type="date" />
</body>
Hopefully this helps some people as for the most part chrome even directly says this is impossible.
found this on Zurb Foundation's GitHub
In case you want to do some more custom styling. Here's all the
default CSS for webkit rendering of the date components.
input[type="date"] {
-webkit-align-items: center;
display: -webkit-inline-flex;
font-family: monospace;
overflow: hidden;
padding: 0;
-webkit-padding-start: 1px;
}
input::-webkit-datetime-edit {
-webkit-flex: 1;
-webkit-user-modify: read-only !important;
display: inline-block;
min-width: 0;
overflow: hidden;
}
input::-webkit-datetime-edit-fields-wrapper {
-webkit-user-modify: read-only !important;
display: inline-block;
padding: 1px 0;
white-space: pre;
}
I used a combination of the above solutions and some trial and error to come to this solution.
I am using styled-components to render a transparent date picker input as shown in the image below:
const StyledInput = styled.input`
appearance: none;
box-sizing: border-box;
border: 1px solid black;
background: transparent;
font-size: 1.5rem;
padding: 8px;
::-webkit-datetime-edit-text { padding: 0 2rem; }
::-webkit-datetime-edit-month-field { text-transform: uppercase; }
::-webkit-datetime-edit-day-field { text-transform: uppercase; }
::-webkit-datetime-edit-year-field { text-transform: uppercase; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: transparent;}
`
You can use the following CSS to style the input element.
input[type="date"] {
background-color: red;
outline: none;
}
input[type="date"]::-webkit-clear-button {
font-size: 18px;
height: 30px;
position: relative;
}
input[type="date"]::-webkit-inner-spin-button {
height: 28px;
}
input[type="date"]::-webkit-calendar-picker-indicator {
font-size: 15px;
}
<input type="date" value="From" name="from" placeholder="From" required="" />
I need to change the default primary Bootstrap 4 color (after the Bootstrap stylesheet has been loaded) to a custom color (choosed by user) for a dynamic Bootstrap component with an internal CSS stylesheet.
I could do, for example, .btn-primary { background-color: red; } but this works just for buttons and, however, it doesn't change the other btn-primary states like ":hover", ":active" and "disabled". It also doesn't change the "primary" color throughout the entire CSS for .alert-primary, .text-primary, .bg-primary, .btn-outline-primary, .badge-primary, etc...
What's the possible solution?
You need to download the Bootstrap Sass files. You can do so from this link.
Once you have them you can open the main bootstrap .scss file and search for:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
Change "primary" to what you need and then recompile to CSS. If you don't have Sass installed on your machine you can use various online tools to accomplish this. Example.
Source: https://getbootstrap.com/docs/4.3/getting-started/theming/
You can do so by using the variables concept(https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
Bootstrap 4 also works on the variables
You can try changing the variable values at run time as mentioned below:
:root {
--main-bg-color: brown;
}
.one {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 50px;
height: 50px;
display: inline-block;
}
.two {
color: white;
background-color: black;
margin: 10px;
width: 150px;
height: 70px;
display: inline-block;
}
.three {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 75px;
}
.four {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 100px;
}
.five {
background-color: var(--main-bg-color);
}
// get variable from inline style
element.style.getPropertyValue("--main-bg-color");
// get variable from wherever
getComputedStyle(element).getPropertyValue("--main-bg-color");
// set variable on inline style
element.style.setProperty("--main-bg-color", "red");
There are different ways do it. I am describing one of them.
Import below lines to your scss file.
#import '~bootstrap/scss/bootstrap.scss';
After that write below code to override it.
$primary = 'red';
$gray = 'gray';
.btn {&.btn-primary {
#include button-variant($primary, $primary, $primary, $primary);
&.disabled,
&:disabled {
border: $gray;
background-color: $gray;
}
&:hover {
opacity: 0.85;
}
}
}
Check the link to use sass mixins to override bootsrap classes.
I am really stoked about the HTML5 date picker.
The caveat is that I don't see or foresee much in the way of applying colors to the picker itself which is going to make the use of the datepicker kind of a deal-breaker on most sites. The <select> suffers from widespread JavaScript-replacement hacks for the simple reason that people can't make it pretty.
So are there any known styling options for the HTML input of type='date'?
The following eight pseudo-elements are made available by WebKit for customizing a date input’s textbox:
::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator
So if you thought the date input could use more spacing and a ridiculous color scheme you could add the following:
::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: silver; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: orange; }
<input type="date">
Currently, there is no cross browser, script-free way of styling a native date picker.
As for what's going on inside WHATWG/W3C...
If this functionality does emerge, it will likely be under the CSS-UI standard or some Shadow DOM-related standard. The CSS4-UI wiki page lists a few appearance-related things that were dropped from CSS3-UI, but to be honest, there doesn't seem to be a great deal of interest in the CSS-UI module.
I think your best bet for cross browser development right now, is to implement pretty controls with JavaScript based interface, and then disable the HTML5 native UI and replace it. I think in the future, maybe there will be better native control styling, but perhaps more likely will be the ability to swap out a native control for your own Shadow DOM "widget".
It is annoying that this isn't available, and petitioning for standard support is always worthwhile. Though it does seem like jQuery UI's lead has tried and was unsuccessful.
While this is all very discouraging, it's also worth considering the advantages of the HTML5 date picker, and also why custom styles are difficult and perhaps should be avoided. On some platforms, the datepicker looks extremely different and I personally can't think of any generic way of styling the native datepicker.
FYI, I needed to update the color of the calendar icon which didn't seem possible with properties like color, fill, etc.
I did eventually figure out that some filter properties will adjust the icon so while i did not end up figuring out how to make it any color, luckily all I needed was to make it so the icon was visible on a dark background so I was able to do the following:
body { background: black; }
input[type="date"] {
background: transparent;
color: white;
}
input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(100%);
}
<body>
<input type="date" />
</body>
Hopefully this helps some people as for the most part chrome even directly says this is impossible.
found this on Zurb Foundation's GitHub
In case you want to do some more custom styling. Here's all the
default CSS for webkit rendering of the date components.
input[type="date"] {
-webkit-align-items: center;
display: -webkit-inline-flex;
font-family: monospace;
overflow: hidden;
padding: 0;
-webkit-padding-start: 1px;
}
input::-webkit-datetime-edit {
-webkit-flex: 1;
-webkit-user-modify: read-only !important;
display: inline-block;
min-width: 0;
overflow: hidden;
}
input::-webkit-datetime-edit-fields-wrapper {
-webkit-user-modify: read-only !important;
display: inline-block;
padding: 1px 0;
white-space: pre;
}
I used a combination of the above solutions and some trial and error to come to this solution.
I am using styled-components to render a transparent date picker input as shown in the image below:
const StyledInput = styled.input`
appearance: none;
box-sizing: border-box;
border: 1px solid black;
background: transparent;
font-size: 1.5rem;
padding: 8px;
::-webkit-datetime-edit-text { padding: 0 2rem; }
::-webkit-datetime-edit-month-field { text-transform: uppercase; }
::-webkit-datetime-edit-day-field { text-transform: uppercase; }
::-webkit-datetime-edit-year-field { text-transform: uppercase; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: transparent;}
`
You can use the following CSS to style the input element.
input[type="date"] {
background-color: red;
outline: none;
}
input[type="date"]::-webkit-clear-button {
font-size: 18px;
height: 30px;
position: relative;
}
input[type="date"]::-webkit-inner-spin-button {
height: 28px;
}
input[type="date"]::-webkit-calendar-picker-indicator {
font-size: 15px;
}
<input type="date" value="From" name="from" placeholder="From" required="" />
I currently set the title attribute of some HTML if I want to provide more information:
<p>An <span class="more_info" title="also called an underscore">underline</span> character is used here</p>
Then in CSS:
.more_info {
border-bottom: 1px dotted;
}
Works very nice, visual indicator to move the mouse over and then a little popup with more information. But on mobile browsers, I don't get that tooltip. title attributes don't seem to have an effect. What's the proper way to give more information on a piece of text in a mobile browser? Same as above but use Javascript to listen for a click and then display a tooltip-looking dialog? Is there any native mechanism?
You can fake the title tooltip behavior with Javascript. When you click/tab on an element with a title attribute, a child element with the title text will be appended. Click again and it gets removed.
Javascript (done with jQuery):
$("span[title]").click(function () {
var $title = $(this).find(".title");
if (!$title.length) {
$(this).append('<span class="title">' + $(this).attr("title") + '</span>');
} else {
$title.remove();
}
});
CSS:
.more_info {
border-bottom: 1px dotted;
position: relative;
}
.more_info .title {
position: absolute;
top: 20px;
background: silver;
padding: 4px;
left: 0;
white-space: nowrap;
}
Demo: http://jsfiddle.net/xaAN3/
Here is a CSS only solution. (Similar to #Jamie Pate 's answer, but without the JavaScript.)
We can use the pseudo class :hover, but I'm not sure all mobile browsers apply these styles when the element is tapped. I'm using pseudo class :focus because I'm guessing it's safer. However, when using pseudo class :focus we need to add tabindex="0" to elements that don't have a focus state intrinsically.
I'm using 2 #media queries to ensure all mobile devices are targeted. The (pointer: coarse) query will target any device that the primary input method is something "coarse", like a finger. And the (hover: none) query will target any device that the primary pointing system can't hover.
This snippet is all that's needed:
#media (pointer: coarse), (hover: none) {
[title] {
position: relative;
display: inline-flex;
justify-content: center;
}
[title]:focus::after {
content: attr(title);
position: absolute;
top: 90%;
color: #000;
background-color: #fff;
border: 1px solid;
width: fit-content;
padding: 3px;
}
}
/*Semantic Styling*/
body {
display: grid;
place-items: center;
text-align: center;
height: 100vh;
}
a {
height: 40px;
width: 200px;
background: #fa4766;
color: #fff;
text-decoration: none;
padding: 10px;
box-sizing: border-box;
border-radius: 10px;
}
/*Functional Styling*/
#media (pointer: coarse), (hover: none) {
[title] {
position: relative;
display: flex;
justify-content: center;
}
[title]:focus::after {
content: attr(title);
position: absolute;
top: 90%;
color: #000;
background-color: #fff;
border: 1px solid;
width: fit-content;
padding: 3px;
}
}
<a title="this is the Title text" tabindex="0">Tag with Title</a>
Obviously, you'll need to open this on a mobile device to test it.
Here is a Pen with the same code.
Given that a lot of people nowadays (2015) use mobile browsers, and title still hasn't found a form of exposure in mobile browsers, maybe it's time to deprecate reliance upon title for meaningful information.
It should never be used for critical information, but it is now becoming dubious for useful information, because if that information is useful and cannot be shown to half the users, then another way of showing it to almost all users needs to be found.
For static pages, perhaps some visible text near to the relevant control, even as fine print. For server-generated pages, browser sniffing could provide that only for mobile browsers. On the client side, javascript could be used to trap the focus event, via bubbling, to show the extra text next to the currently focussed element. That would minimise the screen space taken up, but would not necessarily be of much use, since, in a lot of instances, bringing focus to a control can only be done in a way that immediately activates its action, bypassing the ability to find out about it before using it!
Over all though, it appears that the difficulties of showing the title attribute on mobile devices, may lead to its demise, mostly due to needing an alternative that is more universal. That is a pity, because mobiles could use a way to show such extra info on-demand, without taking up the limited screen space.
It seems strange that the w3c and mobile browser makers did not do anything about this issue a long time ago. At least they could have displayed the title text on top of the menu that appears when a long press on a control is made.
Personally, I wish it was placed at the top of a right-click/long-touch menu, as it won't timeout, and would be available on all browsers.
The other alternative is to construct footnotes, so an [n] type superscript is put next to the element/text needing more info, linking to explanatory text in a list at the bottom of the page. Each of those can have a similar [n] type link back to the original text/element. That way, it keeps the display uncluttered, but provides easy bidirectional swapping in a simple way. Sometimes, old print media ways, with a little hyperlink help, are best.
The title attribute has been hijacked by some browsers to provide help text for the pattern attribute, in that its text pops up if the pattern doesn't match the text in the input element. Typically, it is to provide examples of the right format.
Slightly more elaborated version of flavaflo's answer:
Uses pre-defined div as pop-up that can hold HTML, rather than reading from a title attribute
Opens/closes on rollover if mouse is used
Opens on click (touch screen) and closes on click on the open pop-up or anywhere else on the document.
HTML:
<span class="more_info">Main Text<div class="popup">Pop-up text can use <b>HTML</b><div></span>
CSS:
.more_info {
border-bottom: 1px dotted #000;
position: relative;
cursor: pointer;
}
.more_info .popup {
position: absolute;
top: 15px; /*must overlap parent element otherwise pop-up doesn't stay open when rolloing over '*/
background: #fff;
border: 1px solid #ccc;
padding: 8px;
left: 0;
max-width: 240px;
min-width: 180px;
z-index: 100;
display: none;
}
JavaScript / jQuery:
$(document).ready(function () {
//init pop-ups
$(".popup").attr("data-close", false);
//click on pop-up opener
//pop-up is expected to be a child of opener
$(".more_info").click(function () {
var $title = $(this).find(".popup");
//open if not marked for closing
if ($title.attr("data-close") === "false") {
$title.show();
}
//reset popup
$title.attr("data-close", false);
});
//mark pop-up for closing if clicked on
//close is initiated by document.mouseup,
//marker will stop opener from re-opening it
$(".popup").click(function () {
$(this).attr("data-close",true);
});
//hide all pop-ups
$(document).mouseup(function () {
$(".popup").hide();
});
//show on rollover if mouse is used
$(".more_info").mouseenter(function () {
var $title = $(this).find(".popup");
$title.show();
});
//hide on roll-out
$(".more_info").mouseleave(function () {
var $title = $(this).find(".popup");
$title.hide();
});
});
Demo here https://jsfiddle.net/bgxC/yvs1awzk/
As #cimmanon mentioned: span[title]:hover:after { content: attr(title) } gives you a rudimentary tooltip on touch screen devices. Unfortunately this has problems where the default ui behavior on touch screen devices is to select the text when any non-link/uicontrol is pressed.
To solve the selection problem you can add span[title] > * { user-select: none} span[title]:hover > * { user-select: auto }
A full solution may use some other techniques:
Add position: absolute background, border, box-shadow etc to make it look like a tooltip.
Add the class touched to body (via js) when the user uses any touch event.
Then you can do body.touched [title]:hover ... without affecting desktop users
document.body.addEventListener('touchstart', function() {
document.body.classList.add('touched');
});
[title] {
border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
border-radius:2px;
position: relative;
}
body.touched [title] > * {
user-select: none;
}
body.touched [title]:hover > * {
user-select: auto
}
body.touched [title]:hover:after {
position: absolute;
top: 100%;
right: -10%;
content: attr(title);
border: 1px solid rgba(0, 0, 0, 0.2);
background-color: white;
box-shadow: 1px 1px 3px;
padding: 0.3em;
z-index: 1;
}
<div>Some text where a portion has a <span title="here's your tooltip">tooltip</span></div>
Depending on how much information you want to give the user, a modal dialogue box might be an elegant solution.
Specifically, you could try the qTip jQuery plugin, which has a modal mode fired on $.click():
The title attribute is not supported in any mobile browsers **in a way that it would show the tooltip the same as to desktop mouse users** *(the attribute itself is ofcourse supported in the markup)*.
It's only basically for desktop users with a mouse, keyboard only users can't use it either, or screenreaders.
You can achieve almost similar with javascript as you said.
I was searching for an easy CSS only solution, and this is really the most easy one I found:
<link rel="stylesheet" href="https://unpkg.com/balloon-css/balloon.min.css">
<span aria-label="Whats up!" data-balloon-pos="up">Hover me!</span>
Working example: https://jsfiddle.net/5pcjbnwg/
If you want to customize the tooltip, you find more info here:
https://kazzkiq.github.io/balloon.css/
To avoid using JavaScript, I used this CSS-only tooltip:
http://www.menucool.com/tooltip/css-tooltip
It works great in Mobile and Desktop, and you can customize the styles.
Thanks to #flavaflo for their answer. This works in most cases but if there is more than one title to lookup in the same paragraph, and one opens over the link to another, the unopened link shows through the first. This can be solved by dynamically changing the z-index of the title that has "popped up":
$("span[title]").click(function () {
var $title = $(this).find(".title");
if (!$title.length) {
$(this).append('<span class="title">' + $(this).attr("title") + '</span>');
$(this).css('z-index', 2);
} else {
$title.remove();
$(this).css('z-index', 0);
}
});
Also, you can make both the hover over display and the click display multiline by adding
(linefeed) to the title='' attribute, and then convert that to <br /> for the html click display:
$(this).append('<span class="title">' + $(this).attr("title").replace(/\\n/g, '<br />') + '</span>');
Extremely late to the party but for future visitors, here is a tweak of #Flavaflo's answer to fade the "tooltip" in and out
JQuery:
$(".more_info").click(function () {
var $title = $(this).find(".title");
if (!$title.length) {
$(this).append('<span class="title">' + $(this).attr("title") + '</span>');
} else {
$($title).fadeOut(250, function() {
$title.remove();
});
}
});
CSS:
.more_info {
border-bottom: 1px dotted;
position: relative;
}
.more_info .title {
position: absolute;
top: 20px;
background: green;
padding: 4px;
left: 0;
color: white;
white-space: nowrap;
border-radius:3px;
animation: fadeIn linear 0.15s;
}
#keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
Fiddle here: http://jsfiddle.net/L3paxb5g/
I know this is an old question, but i have found a CSS solution that works on mobile too, it doesn't use title at all and it's easy to implement, explained here:
https://www.w3schools.com/css/css_tooltip.asp
Explanation:
On mobile, with the touchscreen,the first input acts as css hover, so it works like a toggle tooltip when you press on it.
Code example:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted #666;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 15em;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -8em;
opacity: 0;
transition: opacity 0.3s;
padding: 0.5em;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
Footer css after form's css is not working , what is the problem in this css code?
/*------------------------------------*\
FORMS */
fieldset { padding: 10px; border: 1px solid #ccc; margin-bottom: 1.5em; }
label { display: block; cursor: pointer; }
label:after { content:\": "; }
label::after { content:\": "; }
input,textarea { font-family: inherit; font-size: 1em; line-height: 1.5; }
[placeholder] { cursor: pointer; }
[placeholder]:active,[placeholder]:focus { cursor: text; }
fieldset > :last-child { margin: 0; }
footer {background:red; height:200px; width:200px}
jSfiddle http://jsfiddle.net/Aw239/
in jsfiddle example footer should be red background.
At least firefox Doesnt seem to understand this label:after { content:\": "; } i have no idea whats going on here but all i know is that it is the culprit. I've never actually used content properly.
But, remove those lines and everything runs smoothly.. ( OR reformat those two lines as Kyle showed and it should do it. )
Seems like it doesnt like to have closing semicolons in the same row with everything else
http://jsfiddle.net/Aw239/3/
Or.. get rid of the \'s ?
I formatted your CSS a bit and it seems to work in my FF5. http://jsfiddle.net/Aw239/2/
It is red. Are you using IE8? Because you'll need to use the HTML5 shim if you want to style HTML5 elements.
Does this work for you?