Language: ENCN

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