Css3 Form表單布局處理,Input布局處理

一、input=text 樣式處理：

在不同瀏覽器中  input =text 數據框的默認樣式不近相同，為了呈現一致，input 的樣式重寫是必然選擇。

        /*

        * 字體大小

        * 行高 (box-sizeing:content-box)  padding: 處理

        * input 框的高度

        * 寬度：根據實際情況

        */

/*
* 字體大小
* 行高 (box-sizeing:content-box)  padding: 處理
* input 框的高度
* 寬度：根據實際情況
*/
input[type=text]{
    font-size: 14px;
    line-height: 16px;
    height: 16px;
    padding: 10px 8px;
    margin: 0px;
    width: 100%;
    outline:none;
    border: 1px solid #ccc;
    border-radius: 19px;
}

input[type=text]:focus{
    border: 1px solid red;
    box-shadow: 0px 0px 5px rgba(255, 0, 0, 0.3) inset;
}

 

顯示效果：

 

二、 表單布局常見風格1上下結構，label在input 的上方

html

    <div class="container">
        <div class="inputline">
            <label for="" class="label">姓名：</label>
            <input type="text" class="input">
        </div>

        <div class="inputline">
            <label for="" class="label">電話：</label>
            <input type="text" class="input">
        </div>

        <div class="inputline">
            <label for="" class="label">密碼：</label>
            <input type="password" class="input">
        </div>
    </div>

 

css

/*
* 字體大小
* 行高 (box-sizeing:content-box)  padding: 處理
* input 框的高度
* 寬度：根據實際情況
*/
.input {
    font-size: 14px;
    line-height: 16px;
    height: 16px;
    padding: 10px 12px;
    margin: 0px;
    width: 100%;
    outline: none;
    border: 1px solid #ccc;
    border-radius: 19px;

    color: #666;
}

.input:focus {
    border: 1px solid red;
    box-shadow: 0px 0px 5px rgba(255, 0, 0, 0.3) inset;
}

.container {
    padding-top: 30px;
    width: 500px;
    margin: auto;
}

.inputline {}
.label{
    padding: 10px 0px;
    display: block;
}

 

三、表單布局常見風格1左右結構，label在input 的左側

html

    <div class="container"  id="dataOne" >
        <div class="inputline">
            <label for="inputONe" class="label">姓名：</label>
            <div class="inputout">
                <input type="text" class="input" id="inputONe" tabindex="3">
            </div>
        </div>
        <div class="inputline">
            <label for="" class="label">電話：</label>
            <div class="inputout">
                <input type="text" class="input" tabindex="2">
            </div>
        </div>
        <div class="inputline">
            <label for="" class="label">密碼：</label>
            <div class="inputout">
                <input type="text" class="input" tabindex="1">
            </div>
        </div>
    </div>

css

/*
* 字體大小
* 行高 (box-sizeing:content-box)  padding: 處理
* input 框的高度
* 寬度：根據實際情況
*/
.input {
    display: block;
    font-size: 14px;
    line-height: 36px;
    height: 36px;
    padding: 0px 12px;
    margin: 0px;
    width: 100%;
    outline: none;
    border: 1px solid #ccc;
    border-radius: 19px;
    color: #666;
    box-sizing: border-box;
}

.input:focus {
    border: 1px solid red;
    box-shadow: 0px 0px 5px rgba(255, 0, 0, 0.3) inset;
}

.inputline {
    position: relative;
    clear: both;
    margin-bottom: 20px;
}

.inputout {
    margin-left: 100px;
}

.label {
    line-height: 36px;
    height: 36px;
    display: block;
    width: 100px;
    float: left;
}

 

 

 

更多：

CSS3網頁布局之文字布局和文字超出處理

Css 實現半圓進度條展示功能

CSS3實現文本垂直排列-writing-mode