content not working in firefox

Question

Content not working in firefox..working beautifully in chrome what is the problem? please check and say as soon as possible.

This is HTML

<html>
    <head>
      <link rel="stylesheet" type="text/css" href="mystyle.css">
     </head>
    <body>
      <input class="go" type="checkbox">
    </body>
</html>

This is CSS Part

.go {


    top: 5px;
        left: 150px;

        position: relative;
        margin: 35px auto;
        color: white;
        text-align: center;
        text-shadow: 0 1px 0 rgba(0,0,0,.5);
        font-size: 1.0em;
        cursor: pointer;
    }
    .go:before {
        top: -5px;
        left: -50px;
        position: absolute;
        display: block;

        width: 100px;
        border: 1px solid #76011b;
        border-radius: 8px;
        background: linear-gradient(red, blue); 
        box-shadow: 0px 0px 10px rgba(19,93,158,.6);
        content: "Launch";
    }

/*content in here not working in firefox */

    .go:checked:after {
        background: linear-gradient(red, blue); 
        content: "Relaunch";

}

score 0 · Answer 1 · answered Jul 15 '14 at 12:56

0

Vendor prefixes for the linear gradient needs to be added:

background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax */

answered Jul 15 '14 at 12:56

David Pullar

706
6
18

`linear-gradient(red, blue)` works just fine in Firefox without a vendor prefix. – robertc Jul 15 '14 at 12:59

score 0 · Answer 2 · answered Jul 15 '14 at 13:07

0

Pseudo-elements :after and :before doesn't work on input elements (and on img element by the way). Because, actually, they are not supposed to have any content.

You'll have to wrap this input :

<span class="go"><input type="checkbox"></span>

answered Jul 15 '14 at 13:07

enguerranws

8,087
8
49
97

I think it's because your :before pseudo-element is covering your checkbox. And well, in my Chrome, this is not working too. Your code is not standard, you probably should achieve this with some JS. – enguerranws Sep 02 '14 at 14:47
Here is my code in js fiddle...look how beautifully it works---http://jsfiddle.net/6qmzjsvj/ – johnie Sep 03 '14 at 09:16
Your example works in Chrome, even if it's not supposed too. If you want a cross browser solution, change the HTML as I suggested and handle it with some JS. It will never works in Firefox, because it's not standard. See this answer : http://stackoverflow.com/questions/4574912/css-content-generation-before-input-elements#answer-4574946 – enguerranws Sep 04 '14 at 15:23

content not working in firefox

2 Answers2