Adding onfocus and onblur to a style sheet?

[AshleyQuick]

Can these be added to a style sheet instead of embedding them into the input?

<input type="text" size="4" name="" onfocus="this.style.borderColor='##000000';" onblur="this.style.borderColor='silver';">

[liorean]

Just write the onblur on the normal selector, and use :focus pseudo-class for onfocus.

[AshleyQuick]

Sorry to ask :(

Would you mind giving an example? I'm having a difficult time understanding how to implement this into the style sheet.

[liorean]

Given you add either a class or an id to the input:input.class{
border-color: #000;
}

input#id:focus{
border-color: silver;
}

[jkd]

Fixed your [code][/color] BB code... took me a second to figure out what you had posted. :D

Maybe I'm crazy, but isn't:

tagname#idname redundant in (X)HTML? The id has to be unique, so you already have the greatest specifity you can have with the #.

[liorean]

No, it's not redundant - because #id has lower specificity than tagname#id. It is the best means we have of specifying precedence of style rules.

[jkd]

But in an HTML document, an id is unique. Unless we are aware that an id might change elements, it doesn't matter.

http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#specificity

Using #bla, we get 100. Using tag#bla, we get 101.

I guess you're right about it being a higher specificity, but does it really matter? The only selector above #bla is something involving tag#bla, which makes it arbitrary to select which one to use.

I agree in XML documents it makes a difference, but not in HTML. The only use for tag#bla in HTML I can think of is what I said, an id that is changing elements via on dynamic page content (client or serverside)

[liorean]

You might have alternate stylesheets for instance, where you have one lower-specificity lower-compliancy default stylesheet, and then in some themes want to override the default. Then it's useful to have tag#id.

Same if you use something like the high-pass filter to serve one stylesheet to lower-compliancy browsers, and one to higher-compliance browsers overriding the lower-compliancy stylesheet.

If you have a look at my Tabbed Interface (http://liorean.web-graphics.com/dhtml/tabs/tabs.html) page, you can find no less than four overrides of the same element (if I remember the stylesheets correctly), and then the specificity is useful.