<p dir="auto">As per HTML5, controls inside the legend first child of a disabled fieldset are not disabled. This is not a random decision and addresses notably the use case of having a radio or checkbox control in the fieldset, as part of the legend, deciding whether that fieldset is enabled or not. Fiddle: <a href="http://jsfiddle.net/tyVF4/2/" rel="nofollow">http://jsfiddle.net/tyVF4/2/</a>.</p>
<p dir="auto">I headed for the source to fix that, but then I saw this comment:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// Note: HTML5 says that controls under a fieldset &gt; legend:first-child won't
// be disabled if the fieldset is disabled. Due to implementation difficulty,
// we don't honor that edge case; we style them as disabled anyway."><pre class="notranslate"><code class="notranslate">// Note: HTML5 says that controls under a fieldset &gt; legend:first-child won't
// be disabled if the fieldset is disabled. Due to implementation difficulty,
// we don't honor that edge case; we style them as disabled anyway.
</code></pre></div>
<p dir="auto">Is fixing this issue completely out of the question? If not, could you be more specific about "implementation difficulty" before I foolishly jump into it? Right now I'm overriding this with cursor: auto.</p>
<p dir="auto">getbootstrap.com<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/9467e06f5bb18ffb2a93c745cd25a683147b847fde9f4911be656560f69cab07/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f3832373230352f313332313732382f64333634616535612d333365372d313165332d383839662d3730646535613664653464382e706e67"><img src="https://camo.githubusercontent.com/9467e06f5bb18ffb2a93c745cd25a683147b847fde9f4911be656560f69cab07/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f3832373230352f313332313732382f64333634616535612d333365372d313165332d383839662d3730646535613664653464382e706e67" alt="getbootstrap-com" data-canonical-src="https://f.cloud.github.com/assets/827205/1321728/d364ae5a-33e7-11e3-889f-70de5a6de4d8.png" style="max-width: 100%;"></a></p>
<p dir="auto">alistapart.com<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/fc63aa5881c5471d6f2ec8e146add876c4bb487a4397d6d04cc67aa1616493d8/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f3832373230352f313332313732392f64646362383461652d333365372d313165332d386137382d6330313938623361633733392e706e67"><img src="https://camo.githubusercontent.com/fc63aa5881c5471d6f2ec8e146add876c4bb487a4397d6d04cc67aa1616493d8/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f3832373230352f313332313732392f64646362383461652d333365372d313165332d386137382d6330313938623361633733392e706e67" alt="alistapart-com" data-canonical-src="https://f.cloud.github.com/assets/827205/1321729/ddcb84ae-33e7-11e3-8a78-c0198b3ac739.png" style="max-width: 100%;"></a></p>
<p dir="auto">using the (recommended) breakpoints from <a href="http://getbootstrap.com/css/#grid-media-queries" rel="nofollow">http://getbootstrap.com/css/#grid-media-queries</a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/492101368a2850094e51d1554220a4b756a8e8d83bca00e493486aa6823ea819/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f3832373230352f313332313733302f65663135656566632d333365372d313165332d386661372d6232646533623339343265652e706e67"><img src="https://camo.githubusercontent.com/492101368a2850094e51d1554220a4b756a8e8d83bca00e493486aa6823ea819/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f3832373230352f313332313733302f65663135656566632d333365372d313165332d386661372d6232646533623339343265652e706e67" alt="test-demo" data-canonical-src="https://f.cloud.github.com/assets/827205/1321730/ef15eefc-33e7-11e3-8fa7-b2de3b3942ee.png" style="max-width: 100%;"></a></p>
<p dir="auto">also why is there ,max.width:767px and max-width:768px in bootstrap.css? This makes little sense?</p>
<p dir="auto">Or min-width:480 and min-width:481px</p>
<p dir="auto">I am using the following extension in Google Chrome: <a href="https://chrome.google.com/webstore/detail/responsive-inspector/memcdolmmnmnleeiodllgpibdjlkbpim" rel="nofollow">https://chrome.google.com/webstore/detail/responsive-inspector/memcdolmmnmnleeiodllgpibdjlkbpim</a></p>