表单

单选列表项

用法

Class 描述
.baie-cells_radio 父元素，定义单选列表。
.baie-check__label 子元素，设置触发点击时的颜色。
.baie-check 绝对定位，隐藏单选按钮。
.baie-icon_checked 选中状态。

示例

HTML

<div class="baie-cells baie-cells_radio">
    <label class="baie-cell baie-check__label" for="x11">
        <div class="baie-cell__bd">
            <p>cell standard</p>
        </div>

        <div class="baie-cell__ft">
            <input type="radio" name="radio1" class="baie-check" id="x11">
            <span class="baie-icon_checked"></span>
        </div>
    </label>

    <a href="javascript:;" class="baie-cell baie-cell_link">
        <div class="baie-cell__bd">添加更多</div>
    </a>
</div>

CSS

/* 这里需引入列表样式 */

/* 表单 START */
.baie-check__label {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.baie-check {
    position: absolute;
    left: -9999rem;
}
.baie-cells_radio .baie-cell__ft {
    padding-left: .12rem;
}
.baie-cells_radio .baie-cell:active {
    background-color: #ECECEC;
}
.baie-cells_radio .baie-check:checked + .baie-icon_checked {
    width: .32rem;
    height: .32rem;
    background-image: url(/assets/images/icons/default/icon_complete.png)
}
.baie-cells_checkbox .baie-cell__hd {
    padding-right: .12rem;
}
.baie-cells_checkbox .baie-cell:active {
    background-color: #ECECEC;
}
.baie-cells_checkbox .baie-icon_checked {
    width: .46rem;
    height: .46rem;
    border: .02rem solid #C9C9C9;
    border-radius: 50%;
    background-image: none;
}
.baie-cells_checkbox .baie-check:checked + .baie-icon_checked {
    border:none;
    border-radius: 0;
    background-image: url("/assets/images/icons/default/icon_complete.png");
}
.baie-label {
    display: block;
    width: 1.20rem;
    word-wrap: break-word;
    word-break: break-all;
}
.baie-input {
    width: 100%;
    height: .48rem;
    line-height: .48rem;
    padding: 0;
    border: 0;
    outline: 0;
    background-color: transparent;
    font-size: inherit;
    color: inherit;
    -webkit-appearance: none;
}
.baie-input::-webkit-outer-spin-button,
.baie-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.baie-textarea {
    display: block;
    width: 100%;
    height: 1.60rem;
    padding: 0;
    outline: 0;
    border: 0;
    resize: none;
    font-size: .30rem;
    line-height: inherit;
    color: inherit;
}
.baie-textarea-counter {
    color: #B2B2B2;
    text-align: right;
}
.baie-select {
    -webkit-appearance: none;
    position: relative;
    z-index: 1;
    width: 100%;
    height: .88rem;
    border: 0;
    outline: 0;
    background-color: transparent;
    font-size: inherit;
    color: #cecece;
    line-height: inherit;
}
.baie-cell_warn .baie-textarea-counter {
    color: #E64340;
}
.baie-toptips {
    display: none;
    position: fixed;
    -webkit-transform: translateZ(0);
    top: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    font-size: .28rem;
    text-align: center;
    color: #FFF;
    z-index: 1024;
    word-wrap: break-word;
    word-break: break-all;
}
.baie-toptips_warn {
    background-color: #E64340;
}
.baie-cells_form .baie-cell__ft {
    font-size: 0;
}
.baie-cells_form .baie-icon_warn {
    display: none;
}
.baie-cells_form input,
.baie-cells_form textarea,
.baie-cells_form label[for] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.baie-cells_form .baie-input_info {
    display: none;
}
.baie-cells_form:only-child:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: -1px;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #e4e4e4;
    color: #e4e4e4;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    left: .30rem;
}
.baie-cells_form:only-child:after {
    left: 0;
}
.baie-cells_form:only-child>.baie-cell:before {
    left: 0;
}
/*.baie-cell_warn { /!* 警告样式 START *!/*/
/*color: #E64340;*/
/*}*/
.baie-cell_warn .baie-input_info {
    display: inline-block;
}
.baie-cell_warn .baie-input_info {
    width: .38rem;
    height: .38rem;
    line-height: .38rem;
    background-color: #ea5503;
    font-size: .24rem;
    color: #fff;
    text-align: center;
    border-radius: 50%;
}
.baie-cell_warn .baie-input_info:before {
    content: '!';
}
.baie-cell_clear .baie-input_info { /* 清除内容 */
    display: inline-block;
}
.baie-cell_clear .baie-input_info {
    position: absolute;
    top: -.02rem;
    right: -.02rem;;
    width: .92rem;
    height: 100%;
    overflow: hidden;
    text-indent: -999px;
    background: url(/images/icon_clear.png) no-repeat center;
    background-size: .32rem;
}

.baie-cell_vcode { /* 验证码 START */
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
}
.baie-vcode-img {
    margin-left: .10rem;
    height: .88rem;
    vertical-align: middle;
}
.baie-vcode-btn {
    position: relative;
    display: inline-block;
    height: .88rem;
    margin-left: .10rem;
    padding: 0 0.2rem 0 0.24rem;
    line-height: .88rem;
    vertical-align: middle;
    font-size: .32rem;
    color: #ea5503;
}
.baie-vcode-btn:active {
    color: #db4f03;
}
.baie-vcode-btn:before {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    border-left: 1px solid #e4e4e4;
    color: #e4e4e4;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}
.baie-cell_switch { /* 切换按钮 START */
    padding-top: .12rem;
    padding-bottom: .12rem;
}
.baie-switch {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 1.04rem;
    height: .64rem;
    border: 1px solid #DFDFDF;
    outline: 0;
    border-radius: .32rem;
    box-sizing: border-box;
    background-color: #DFDFDF;
    -webkit-transition: background-color 0.1s, border 0.1s;
    transition: background-color 0.1s, border 0.1s;
}
.baie-switch:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 1.0rem;
    height: .60rem;
    border-radius: .30rem;
    background-color: #FDFDFD;
    -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
    transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
    transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
    transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1), -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
}
.baie-switch:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: .60rem;
    height: .60rem;
    border-radius: .30rem;
    background-color: #FFFFFF;
    box-shadow: 0 .02rem .06rem rgba(0, 0, 0, 0.4);
    -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
    transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
    transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
    transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35), -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
}
.baie-switch:checked {
    border-color: #04BE02;
    background-color: #04BE02;
}
.baie-switch:checked:before {
    -webkit-transform: scale(0);
    transform: scale(0);
}
.baie-switch:checked:after {
    -webkit-transform: translateX(.40rem);
    transform: translateX(.40rem);
}

.baie-cell_select { /* 下拉选择框 START */
    padding-top: 0;
    padding-bottom: 0;
}
.baie-cell_select-before {
    padding-left: .30rem;
    padding-right: .30rem;
}
.baie-cell_select-before .baie-cell__hd {
    position: relative;
}
.baie-cell_select-before .baie-cell__hd:before {
    content: " ";
    display: inline-block;
    height: .12rem;
    width: .12rem;
    border-width: 2px 2px 0 0;
    border-color: #C8C8CD;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: absolute;
    top: 50%;
    right: .30rem;
    margin-top: -.06rem;
}
.baie-cell_select-before .baie-cell__hd:after {
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-right: 1px solid #e4e4e4;
    color: #e4e4e4;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}
.baie-cell_select-before .baie-select {
    width: 1.20rem;
    box-sizing: border-box;
    top: .04rem;
}
.baie-cell_select-before .baie-cell__bd {
    padding-left: .30rem;
}
.baie-cell_select-before .baie-cell__bd:after {
    display: none;
}
.baie-cell_select-after {
    padding-left: .30rem;
}
.baie-cell_select-after .baie-select {
    padding-left: 0;
}
.baie-cell_textarea { /* 文本域前有label */
    align-items: flex-start;
}
.baie-agree { /* 同意条款 */
    display: block;
    padding: .12rem .30rem;
    font-size: .26rem;
}
.baie-agree__checkbox {
    -webkit-appearance: none;
    appearance: none;
    outline: 0;
    font-size: 0;
    border: 1px solid #D1D1D1;
    background-color: #FFFFFF;
    border-radius: .06rem;
    width: .26rem;
    height: .26rem;
    position: relative;
    vertical-align: middle;
    /*top: .02rem; 和全局样式冲突*/
}
.baie-agree__checkbox:checked:before {
    content: "";
    width: .23rem;
    height: .23rem;
    background: url("/assets/images/icons/default/icon_choose.png") no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%) scale(0.73);
    -webkit-transform: translate(-50%, -48%) scale(0.73);
}
.baie-agree__text {
    color: #838383;
    vertical-align: middle;
}
.baie-agree a {
    color: #586C94;
}
.baie-btn-area {
    padding: .72rem .30rem 0;
    text-align: center;
}
.baie-btn-fixed { /* 按钮固定于底部 */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1024;
    border-radius: 0;
}
/* 表单 END */

复选列表项

用法

Class 描述
.baie-cells_checkbox 父元素，定义复选列表。
.baie-check__label 子元素，设置触发点击时的颜色。
.baie-check 绝对定位，隐藏单选按钮
.baie-icon_checked 选中状态

示例

HTML

<div class="baie-cells baie-cells_checkbox">
    <label class="baie-cell baie-check__label" for="s11">
        <div class="baie-cell__hd">
            <input type="checkbox" class="baie-check" name="checkbox1" id="s11" checked="checked">
            <i class="baie-icon_checked"></i>
        </div>

        <div class="baie-cell__bd">
            <p>standard is dealt for u.</p>
        </div>
    </label>

    <label class="baie-cell baie-check__label" for="s12">
        <div class="baie-cell__hd">
            <input type="checkbox" name="checkbox1" class="baie-check" id="s12">
            <i class="baie-icon_checked"></i>
        </div>

        <div class="baie-cell__bd">
            <p>standard is dealicient for u.</p>
        </div>
    </label>

    <a href="javascript:;" class="baie-cell baie-cell_link">
        <div class="baie-cell__bd">添加更多</div>
    </a>
</div>

CSS

同上

表单

用法

.baie-cells_form 父元素，定义表单。
.baie-label 设置label样式。
.baie-input 设置文本框样式
.baie-textarea 设置文本域样式
.baie-check 绝对定位，隐藏单选按钮
.baie-cell_vcode 父元素，消除上下右内边距
.baie-vcode-btn 设置获取验证码样式
.baie-vcode-img 设置验证码图片样式
.baie-cell_warn 父元素，设置报错时label字体样式
.baie-icon_warn 设置警告图标样式
.baie-cell_switch 父元素，调整上下内边距
.baie-switch 设置切换按钮样式
.baie-cell_select 父元素，调整内边距
.baie-cell_select-before 父元素，设置select居前的样式
.baie-cell_select-after 父元素，设置select居后的样式
.baie-select 调整select的样式

示例

HTML

<div class="baie-form-area">
    <div class="baie-cells baie-cells_form">
        <div class="baie-cell baie-cell_access">
            <div class="baie-cell__bd">
                <label class="baie-label">头像</label>
            </div>
            <div class="baie-cell__ft">
                <img src="./images/avatar.png" alt="" class="baie-cell_avatar"/>
            </div>
        </div>

        <div class="baie-cell">
            <div class="baie-cell__hd"><label class="baie-label">qq</label></div>
            <div class="baie-cell__bd">
                <input class="baie-input" type="number" pattern="[0-9]*" placeholder="请输入qq号">
            </div>
        </div>

        <div class="baie-cell baie-cell_vcode">
            <div class="baie-cell__hd">
                <label class="baie-label">手机号</label>
            </div>
            <div class="baie-cell__bd">
                <input class="baie-input" type="tel" placeholder="请输入手机号">
            </div>
            <div class="baie-cell__ft">
                <button type="button" class="baie-vcode-btn">获取验证码</button>
            </div>
        </div>

        <div class="baie-cell">
            <div class="baie-cell__hd"><label for="" class="baie-label">日期</label></div>
            <div class="baie-cell__bd">
                <input class="baie-input" type="date" value="">
            </div>
        </div>

        <div class="baie-cell">
            <div class="baie-cell__hd"><label for="" class="baie-label">时间</label></div>
            <div class="baie-cell__bd">
                <input class="baie-input" type="datetius-local" value="" placeholder="">
            </div>
        </div>

        <div class="baie-cell baie-cell_vcode">
            <div class="baie-cell__hd"><label class="baie-label">验证码</label></div>
            <div class="baie-cell__bd">
                <input class="baie-input" type="number" placeholder="请输入验证码">
            </div>
            <div class="baie-cell__ft">
                <img class="baie-vcode-img" src="./images/vcode.jpg">
            </div>
        </div>

        <div class="baie-cell baie-cell_warn">
            <div class="baie-cell__hd"><label for="" class="baie-label">卡号</label></div>
            <div class="baie-cell__bd">
                <input class="baie-input" type="number" pattern="[0-9]*" value="baie input error" placeholder="请输入卡号">
            </div>
            <div class="baie-cell__ft">
                <i class="baie-icon_warn"></i>
            </div>
        </div>

        <div class="baie-cell baie-cell_switch">
            <div class="baie-cell__bd">启用</div>
            <div class="baie-cell__ft">
                <input class="baie-switch" type="checkbox">
            </div>
        </div>

        <div class="baie-cell baie-cell_select baie-cell_select-after">
            <div class="baie-cell__hd">
                <label class="baie-label">国家/地区</label>
            </div>
            <div class="baie-cell__bd">
                <select class="baie-select" name="select2">
                    <option value="1">中国</option>
                    <option value="2">美国</option>
                    <option value="3">英国</option>
                </select>
            </div>
        </div>

        <div class="baie-cell baie-cell_select">
            <div class="baie-cell__bd">
                <select class="baie-select" name="select1">
                    <option value="">这是选择框</option>
                    <option value="1">微信号</option>
                    <option value="2">QQ号</option>
                    <option value="3">Email</option>
                </select>
            </div>
        </div>

        <div class="baie-cell baie-cell_select baie-cell_select-before">
            <div class="baie-cell__hd">
                <select class="baie-select" name="select2">
                    <option value="1">+86</option>
                    <option value="2">+80</option>
                    <option value="3">+84</option>
                    <option value="4">+87</option>
                </select>
            </div>
            <div class="baie-cell__bd">
                <input class="baie-input" type="number" pattern="[0-9]*" placeholder="请输入号码">
            </div>
        </div>

        <div class="baie-cell">
            <div class="baie-cell__bd">
                <input class="baie-input" type="text" placeholder="这是文本框">
            </div>
        </div>

        <div class="baie-cell">
            <div class="baie-cell__bd">
                <textarea class="baie-textarea" placeholder="这是文本域" rows="3"></textarea>
                <div class="baie-textarea-counter"><span>0</span>/200</div>
            </div>
        </div>

        <label for="baieAgree" class="baie-agree">
            <input id="baieAgree" type="checkbox" class="baie-agree__checkbox">
            <span class="baie-agree__text">
                阅读并同意
                <a href="javascript:;">《相关条款》</a>
            </span>
        </label>

    </div>
</div>

<div class="baie-btn-area">
    <a class="baie-btn baie-btn_orange" href="javascript:">确定</a>
</div>

CSS

同上

results matching ""

    No results matching ""