Greyout вся форма CSS

Question

Мне нужно выкрасить всю форму и отключить ее, если это возможно, используя (управляется Javascript)

Моя идея была:

<div style="background-color: gray; opacity:0.7; z-index:2;">
       <h:form prependId="false" id="login_form" style="x-index:1;">
             ...button
             ...inputBox
       </h:form>
</div>

Но это не работает должным образом, потому что серый DIV находится только на заднем плане, и я хочу серый на ВСЕХ объектах в форме (поле ввода, кнопка, текст и т. Д.)

Я предпочитаю использовать только один DIV, поэтому мне не нужно менять стиль каждого объекта (кнопка отключена, поле ввода отключено и т. Д ...)

Спасибо

Answer 1

Есть несколько способов, которыми это может быть достигнуто - один простой подход, основанный исключительно на CSS, состоит в том, чтобы определить класс CSS .disable-form и применить его к <div/>, который охватывает вашу форму, когда вы хотите, чтобы ваша форма быть отключенным.

Вы можете сделать это так:

.disable-form {

   /* Make form elements appear disabled against grey background */
   background-color: gray;
   opacity:0.5; 

   /* Prevent user interaction with form while disabled */
   pointer-events:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div>
  <form prependId="false" id="login_form">
    <div>
      <label>Some field</label>
      <input />
    </div>
    <label>Some field not wrapped in div</label>
    <input />
  </form>
</div>


<br>
<br>
<button id="toggle-disable">Click to toggle form disable</button>
<script>

document.getElementById('toggle-disable')
.addEventListener('click', function() {

   document.getElementById('login_form')
  .parentNode
  .classList
  .toggle('disable-form');   
  
});
</script>

Обратите внимание, что в этом примере кода я настроил HTML-код с целью демонстрации техники - здесь ключом является определение и применение CSS disable-form для достижения желаемого эффекта в вашей форме.