更改其中存在的输入字段的背景颜色后，Fieldset顶部边框中断：仅在IE 11中

Question

Update

I am facing an issue with fieldset top border in IE 11.

Description: I am having a fieldset in my web page. Its legend tag contains a checkbox. And its sub elements are input text fields. I have a JS which changes background color of input fields on checking/Unchecking checkbox present in legend.

Problem: When background color of input field changes, Fieldset's top border breaks

Can anyone tell me why this is happening?

Sample Code:

 function changeBackground() { document.getElementById("changeit").style.backgroundColor = "red"; } 

 table .td-left { width: 60%; text-align: left; } table .td-right { width: 40%; text-align: right; } 

 <fieldset> <legend> <input type="checkbox" onclick="changeBackground()"> <label>Hello</label> </legend> <table> <tr> <td class="td-right"> <label>Enter Text Here:</label> </td> <td class="td-left"> <input type="text" id="changeit"> </td> </tr> </table> </fieldset> 

Answer 1

The problem is caused by the checkbox in the legend, obviously. Simply removing the checkbox from the legend makes it work fine.

 function changeBackground() { document.getElementById("changeit").style.backgroundColor = "red"; } 

 table .td-left { width: 60%; text-align: left; } table .td-right { width: 40%; text-align: right; } 

 <fieldset> <legend> </legend> <div style="color:green; height:0; overflow:visible">Booh Booh Booh Booh Booh Booh Booh</div> <input type="checkbox" onclick="changeBackground()"> <label>Hello</label> <table> <tr> <td class="td-right"> <label>Enter Text Here:</label> </td> <td class="td-left"> <input type="text" id="changeit"> </td> </tr> </table> </fieldset> 

So what we need to do is make it look like the checkbox is in the legend, without it actually being in there. How about this:

 function changeBackground() { document.getElementById("changeit").style.backgroundColor = "red"; } 

 table .td-left { width: 60%; text-align: left; } table .td-right { width: 40%; text-align: right; } fieldset label[for='flip']::before { content: ' ☐ '; } #flip { display: none; } #flip:checked+fieldset label[for='flip']::before { content: ' ☑ '; } 

 <input type="checkbox" id="flip" onclick="changeBackground()"> <fieldset> <legend> <label for="flip">Hello</label> </legend> <table> <tr> <td class="td-right"> <label>Enter Text Here:</label> </td> <td class="td-left"> <input type="text" id="changeit"> </td> </tr> </table> </fieldset>