Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Hover Effect not working

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #248020
    knbfoster
    Participant

    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

    #248022
    Paulie_D
    Member

    <input> elements can’t have pseudo-elements.

    Use a <button> instead

    http://codepen.io/Paulie-D/pen/yVgVjb

    #248030
    Shikkediel
    Participant

    <input> elements can’t have pseudo-elements.

    Try telling this guy

    #248033
    Paulie_D
    Member

    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..

    #248034
    Shikkediel
    Participant

    Indeed, Chrome adds an invalid closing &lt;/input&gt; 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).

    #248069
    knbfoster
    Participant

    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!

    #248072
    Paulie_D
    Member

    Not really…for all the reasons mentioned above.

    I suggest your “developer ” should be a little more flexible.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.