Master Mobile Form UI: Clickable Inputs, Icons, and SCSS Techniques

This series tutorial is a practical guide summarizing the author's mobile refactoring experience and a comprehensive analysis of the sandal and sheral UI frameworks, originally published on imweb, w3cplus, and the "Frontend Talk" WeChat public account.

form

The desired effect is shown in the demo (see sheral form). The form resembles a line list but differs in user‑experience details such as the clickable input area and the clickable right‑arrow.

Key UX differences:

Clickable range of the input box

Clickable range of the right arrow

In a line list, the whole row is clickable, so the arrow is only a visual cue. In this form, the arrow must trigger an event, so its clickable area must be designed carefully, and the input should occupy the full row height for easy tapping. For a phone field, users can type directly or tap the arrow to open the address book, so a simple copy of a line list will not work.

The HTML structure consists of three columns: label, form element, and right‑hand addon.

<code>.form-item
    label.item-label
    .item-field
        input:text.f-text <!-- form element -->
        p.field-value.placehold <!-- selected value or placeholder -->
    i.icon-v-right <!-- right part -->
</code>

The SCSS uses flex layout; the middle input part is set with

flex:1;

<code>.form-item{
    display: flex; /* flex layout, vertical centering */
    align-items: center;
    position: relative;
    line-height: $barHeight;
    overflow: hidden;

    &:not(:first-of-type)::before { /* 1px divider */
        content: "";
        @include retina-one-px-border;
    }

    .item-field{ /* remaining width */
        flex: 1;
        width: 1%;
    }
    .icon-v-right{ /* right arrow */
        display: block;
        width: 30px;
        height: $barHeight;
        color: #ccc;
    }
}
</code>

错误处理

Four icons are provided: alert, info, question, and ok. Their styles are defined in

sandal/ext/_icons.scss

:

<code>.icon-alert{
    color: $red;
    &::after{
        content: "!";
    }
}
.icon-info{
    color: $blue;
    &::after{
        content: "i";
    }
}
.icon-question{
    color: $blue;
    &::after{
        content: "?";
    }
}
.icon-ok{
    color: $green;
    &::after{
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 2px;
        border-bottom: 1px solid currentColor;
        border-left: 1px solid currentColor;
        transform: translate(-50%, -50%) rotate(-52deg) scale(1.5);
        margin-top: -1px;
    }
}
</code>

The first three icons use pseudo‑elements to insert “!”, “i”, and “?” respectively, while the ok icon draws its shape with CSS transforms to match the same thickness.

search

The second search box is a fake input that redirects to a real search page; the centered icon and text are not actual input content.

range

The range component uses

input:range

and resets the shadow‑DOM styles. Styles are defined in

_range.scss

. For low‑end browsers a wrapper

.range-wrap

with pseudo‑elements creates the trace.