0

I used the SO questions Gray out image with CSS? and Disable link using css to construct a css wrapper that would grey out a button, and also prevent clicks to it. I tried first in a separate css file, but this example uses inline css styles and gives the same result. Here are 4 buttons:

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

    <form>
        <span style="opacity:0.4; pointer-events: none;">
            <input type='submit' value='Span Inside' />
        </span>
    </form>

    <form>
        <div  style="opacity:0.4; pointer-events: none;">
            <input type='submit' value='Div Inside' />
        </div>
    </form>

    <div  style="opacity:0.4; pointer-events: none;">
        <form>
            <input type='submit' value='Div Outside' />
        </form>
    </div>

    <span style="opacity:0.4; pointer-events: none;">
        <form>
            <input type='submit' value='Span Outside' />
        </form>
    </span>

</body>
</html>

All four buttons in this example do not respond to clicks in any of Firefox 15.0.1, Safari 6.0 or Chrome 21.0.1180.89, which is what I expected.

In Firefox, all 4 buttons are greyed out, opacity 0.4, which is what I expected.

In Safari and Chrome, the first 3 buttons are greyed out, but the 4th button, with the span elements outside the form elements, has opacity 1.0.

Is there a bug in the browsers, or is it in in my understanding, please?

Community
  • 1
  • 1
emrys57
  • 6,679
  • 3
  • 39
  • 49
  • span allows only phrasing context inside it. It should not allow a nested form element and, as you can see, every browser may behaves differently – Fabrizio Calderan Sep 25 '12 at 10:38
  • 1
    The markup is non-conformant so you should not be surprised when browsers coerce your markup into a less invalid form. For instance, very old versions of Firefox used to do this too. – Neil Sep 25 '12 at 11:05
  • Thanks for your explanations. So, if I want to wrap a style around arbitrary content and have it not insert newlines, I should write
    – emrys57 Sep 25 '12 at 11:21

1 Answers1

1

If your tryig to disable an input field or button on a form then you should be using the disabled attribute

Simon West
  • 3,708
  • 1
  • 26
  • 28
  • Yes, but the form in the middle is actually created by a function I cannot modify, and presented to me as a string. I could text-process the string, but that's somewhat unpredictable. So I wrap the form in a style instead. – emrys57 Sep 25 '12 at 11:25
  • 1
    You can programmatically set the disabled attribute via javscript after your form has been appended to the DOM. – Simon West Sep 25 '12 at 11:28