Disabled elements

Framework7 supports styles for disabled elements. To make any element disabled all you need is to add "disabled" class to this element or "disabled" attributes for form element:

<div class="list-block">
    <ul>
        <li class="item-content">
            <div class="item-inner">
                <div class="item-title">Element 1</div>
            </div>
        </li>
        <!-- This element will be disabled -->
        <li class="item-content disabled">
            <div class="item-inner">
                <div class="item-title">Element 2</div>
            </div>
        </li>
        <li class="item-content">
            <div class="item-inner">
                <div class="item-title">Element 3</div>
            </div>
        </li>
        <!-- Element with disabled input -->
        <li class="item-content">
            <div class="item-inner">
                <div class="item-title label">Your name</div>
                <div class="item-input">
                    <!-- Disabled input -->
                    <input type="text" name="name" disabled>
                </div>
            </div>
        </li>
    </ul>
</div>     
  • Note that "disabled" attribute can be applied only for form elements like input, textarea and select

  • "disabled" class can be applied to any HTML element

  • Disabled element has lower opacity and doesn't receive any touch/click events