Question

Ref: Forms, Post and submit buttons

Following on from my last question, I’ve attempted to style my input tags.

I tried

.as_link {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
}
.as_link:link {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
}
.as_link:visited {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
}
.as_link:hover {
    text-decoration: underline;
    background: #F4F0F0;
}

but read somewhere that you’re not meant to select elements in this fashion for pseudo-classes so I tried:

input.as_link {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
}
input.as_link:link {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
}
input.as_link:visited {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
}
input.as_link:hover {
    text-decoration: underline;
    background: #F4F0F0;
}

Still no dice on the hover. The standard does take effect but the hover does nothing. My question is this:

What are the rules on assigning pseudo-classes in general? Not just in my case above but are they only for anchors or can you use them for any elements?

Thanks in advance.

Edit: this is not local to IE. This problem happens in Opera 9 and FF3 as well.

Edit2: I feel it has something to do with the fact hover needs link and visited prior to it. It seems as though the browsers ignore link and visted if they don’t have an anchor tag around them? This is purely speculating but I wonder if it holds any merit?

Answer 1

I think I just found the answer….

My code was flawed.

input.as_link:hover {
    text-decoration: underline;
    background: yellow;
}
input.as_link:focus {
    text-decoration: underline;
    background: yellow;
}
input.as_link:focus:hover {
    text-decoration: underline;
    background: yellow;
}

Underscore doesn’t work because it’s not “text” and the text isn’t highlighted. Shame but oh well, the background colour I chose didn’t show up… I guess I typed in one incorrectly (or the same as the background). The bright yellow worked.

Thanks to everyone who replied though!