表单元素的css样式，自适应屏幕

最新推荐文章于 2024-10-31 16:46:58 发布

原创最新推荐文章于 2024-10-31 16:46:58 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #表单

css 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了使用CSS创建固定长度的label元素与100%宽度的input框的方法，并提供了相应的LESS文件，包括错误提示、警告和成功状态的颜色定义及样式实现。

经常写表单样式，这边记录一下最近写的css样式。效果是：label固定长度，input框为100%。

<form class="fe-form required colon">
    <div class="form-group">
        <label class="form-label">姓名</label>
        <input type="text" class="fe-input" placeholder="请输入姓名">
    </div>

    <div class="form-group" >
        <label class="form-label">something to drink？</label>
        <select class="fe-select">
            <option value=" ">something to drink</option>
            <option value="apple">coffee</option>
            <option value="banana">tea</option>
            <option value="orange">Coca Cola</option>
            <option value="orange">橙汁儿</option>
        </select>
    </div>  
    <div class="form-group">
        <label class="form-label">详细描述</label>
        <textarea class="fe-input success" placeholder="请详细描述"></textarea>
    </div>
</form>

less文件：

@error-color: #ff0000;
@waring-color: #C8C365;
@success-color: #3c763d;
.fe-form {
    width: 100%;
    &.colon {
        .form-label:after {
            content: ":";
        }
    }
    &.required, &.required-before {
        .form-label:before {
            content: "*";
            color: #ff0000;
        }
    }
    &.required-after {
        .form-label:after {
            content: "*";
            color: #ff0000;
        }
    }
    .form-group {
        margin-bottom: 15px;
        height: 37px;
        position: relative;
        box-sizing: border-box;
        padding-left: 120px;
        .form-label {
            text-align: left;
            font-weight: normal;
            position: absolute;
            top: 5px;
            left: 0;
        }
        input, select, textarea {
            width: 100%;
            display: block;
            padding: 6px 12px;
            font-size: 12px;
            line-height: 1.42857143;
            color: #555555;
            background-color: #ffffff;
            background-image: none;
            border: 1px solid #cccccc;
            border-radius: 4px;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }
        &.size-xs {
            padding-left: 80px;
        }
        &.size-s {
            padding-left: 100px;
        }
        &.size-m {
            padding-left: 120px;
        }
        &.size-l {
            padding-left: 140px;
        }
        &.size-xl {
            padding-left: 160px;
        }
    }
    .fe-input {
        font-family: inherit;
        font-size: inherit;
        &[type="search"] {
            -webkit-appearance: none;
        }
        color: #555555;
        background-color: #ffffff;
        background-image: none;
        border: 1px solid #cccccc;
        border-radius: 4px;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        box-sizing: border-box;
        &:focus {
            border-color: #b597c7;
            outline: 0;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(181, 151, 199, 0.6);
        }
        &.warning {
            border-color: @waring-color;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            &:focus {
                border-color: @waring-color;
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
            }
        }
        &.success {
            border-color: @success-color;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            &:focus {
                border-color: @success-color;
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
            }
        }
        &.error {
            border-color: @error-color;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            &:focus {
                border-color: @error-color;
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ff6666;
            }
        }
        &[disabled], &[readonly] {
            cursor: not-allowed;
            background-color: #eeeeee;
            opacity: 1;
        }
    }
    .fe-select {
        display: block;
        width: 100%;
        height: 31px;
        padding: 6px 12px;
        font-size: 12px;
        margin: 0;
        line-height: 1.42857143;
        color: #555555;
        background-color: #ffffff;
        background-image: none;
        border: 1px solid #cccccc;
        border-radius: 4px;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        text-transform: none;
        &:focus {
            border-color: #b597c7;
            outline: 0;
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(181, 151, 199, 0.6);
        }
        &::-moz-placeholder {
            color: #999999;
            opacity: 1;
        }
        &:-ms-input-placeholder, &::-webkit-input-placeholder {
            color: #999999;
        }
        &[disabled], &[readonly] {
            cursor: not-allowed;
            background-color: #eeeeee;
            opacity: 1;
        }
        &[multiple], &[size] {
            height: auto;
        }
        &.input-sm, .form-group-sm {
            height: 28px;
            line-height: 28px;
        }
        &.input-lg, .form-group-lg {
            height: 42px;
            line-height: 42px;
        }
        &.warning {
            border-color: @waring-color;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            &:focus {
                border-color: @waring-color;
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
            }
        }
        &.success {
            border-color: @success-color;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            &:focus {
                border-color: @success-color;
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
            }
        }
        &.error {
            border-color: @error-color;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            &:focus {
                border-color: @error-color;
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ff6666;
            }
        }
    }
}