Search code examples
cssinputmicrosoft-metrometro-ui-css

How can I change size of input control in metro ui?


how can I control size of inputs in Metro UI Framework? Bootstrap has class form-group-sm i guess, but have MetroUI something similar ?


Solution

  • MetroUI isn't as fully featured as Bootstrap but it has some simple options for inputs:

    <!-- Checkbox -->
    <label class="input-control checkbox">
        <input type="checkbox" checked>
        <span class="check"></span>
        <span class="caption">Checkbox</span>
    </label>
    <!-- Small Checkbox -->
    <label class="input-control checkbox small-check">
        <input type="checkbox" checked>
        <span class="check"></span>
        <span class="caption">Checkbox</span>
    </label>
    <!-- Radio button -->
    <label class="input-control radio">
        <input type="radio">
        <span class="check"></span>
        <span class="caption">Radio</span>
    </label>
    <!-- Small radio button -->
    <label class="input-control radio small-check">
        <input type="radio">
        <span class="check"></span>
        <span class="caption">Small radio</span>
    </label>
    

    Text boxes can be default or big:

    <div class="input-control text big-input">
        <input type="text">
    </div>
    

    It also provides a couple of simple options for buttons:

    <button class="button">Caption</button>
    <button class="button mini-button">Caption</button>
    <button class="button small-button">Caption</button>
    <button class="button large-button">Caption</button>