- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hello,
I created a CSS hover effect for a button and the hover effect is not working with the tag I’m using (<input type=”button” class=”btn-blue” value=”TESTESTEST” />). When I use TESTESTEST it works just fine.
Here’s the code:
http://codepen.io/knfoster/pen/vygXwr
Hopefully my request makes sense.
Thank you,
B
<input>
elements can’t have pseudo-elements.
Use a <button>
instead
<input> elements can’t have pseudo-elements.
Try telling this guy…
That’s non-conforming behaviour against the spec.
When their computed content value is not none, these pseudo-elements generate boxes as if they were immediate children of their originating element, and can be styled exactly like any normal document-sourced element in the document tree.
https://www.w3.org/TR/css-pseudo-4/#generated-content
Since input
elements don’t have children they should not receive pseudo-elements.
It certainly doesn’t work in FF and probably not IE..
Indeed, Chrome adds an invalid closing </input>
tag making that particular example still work. But it’ll never become cross browser of course. Which doesn’t seem to have reached the SO author for an update on his answer (nor with the easy overall fix I offered).
Thank you so much for the insight. Your answers were very helpful, however my developer needs to format his html the way I’ve written it because of our system. Do I have any other options for creating a button with a hover effect and still use the same markup I have (<input type=”button” class=”btn-blue” value=”TESTESTEST” />)? I’m basically looking for a way that I can adjust the CSS alone and not change the markup.
Any help you could give me would be GREATLY appreciated.
Thank you!
Not really…for all the reasons mentioned above.
I suggest your “developer ” should be a little more flexible.