Fieldset Top Border разрывается после изменения цвета фона поля ввода, присутствующего в нем: только в IE 11 - PullRequest
Новая
       58

Fieldset Top Border разрывается после изменения цвета фона поля ввода, присутствующего в нем: только в IE 11

0 голосов
/ 25 октября 2018

Обновление

Я столкнулся с проблемой с верхней границей набора полей в IE 11.

Описание: у меня есть набор полей на моей веб-странице.Его легенда содержит флажок.А его подэлементами являются поля ввода текста.У меня есть JS, который меняет цвет фона полей ввода при установке / снятии флажка, присутствующего в легенде.

Проблема: При изменении цвета фона поля ввода верхняя граница Fieldset ломается

Может кто-нибудь сказать мнепочему это происходит?

Пример кода: 

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>

1 Ответ

0 голосов
/ 31 октября 2018

Проблема вызвана флажком в легенде, очевидно.Просто убрав флажок из легенды, он работает нормально. 

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>

Итак, нам нужно сделать так, чтобы выглядел как флажок в легенде, без фактическоготам.Как насчет этого: 

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