4、美化表单元素

新的伪类

focus

元素聚焦时的样式

input:focus {
    outline: 1px solid #008c8c;
    outline-offset: 0px;
    color: #000;
}

<p>
    <a tabindex="2" href="https://wwww.baidu.com">Lorem</a>
</p>
<p>
    <input tabindex="1" type="text">
</p>
<p>
    <button tabindex="3" type="submit">提交</button>
</p>

checked

单选或多选框被选中的样式

<style>
    input:checked + label{
        color: red;
    }
</style>

 <p>
    <input id="radioMale" name="gender" type="radio"> 
    <label for="radioMale">男</label>
    <input id="radioFemale" name="gender" type="radio"> 
    <label for="radioFemale">女</label>
</p>

常见用法

重置表单元素样式

input,textarea,button,select{
    border: none;
}

input:focus, textarea:focus, button:focus, select:focus {
    outline: none;
    outline-offset: 0;
}

设置新的样式

input[type="text"], textarea, select {
    border: 1px solid #999;
}

input[type="text"]:focus, textarea, select {
    border: 1px solid #008c8c;
}

button {
    border:2px solid #008c8c;
    border-radius: 5px;
}

<p>
    <select name="" id="">
        <option value="">Lorem.</option>
        <option value="">Nisi.</option>
        <option value="">Officia!</option>
        <option value="">Odit.</option>
        <option value="">Illo.</option>
        <option value="">Natus.</option>
        <option value="">Quia.</option>
        <option value="">Repellat.</option>
        <option value="">Consectetur!</option>
        <option value="">Magni.</option>
    </select>
</p>
<p>
    <input type="text">
</p>
<p>
    <textarea name="" id=""></textarea>
</p>
<p>
    <button type="submit">提交</button>
</p>

设置textarea是否允许调整尺寸

css属性resize：

both：默认值，两个方向都可以调整尺寸
none：不能调整尺寸
horizontal：水平方向可以调整尺寸
vertical：垂直方向可以调整尺寸

 <style>
    textarea {
        resize: horizontal; 
    }
</style>

<textarea ></textarea>

文本框边缘到内容的距离

<input type="text">
<textarea></textarea>

/* 方式1：padding */
input{
    padding: 5px 10px;
}

/* 方式2：text-indent */
input, textarea{
    text-indent: 1em;
}

控制单选和多选的样式

<p>
    请选择性别：
    <label class="radio-item">
        <input name="gender" type="radio">
        <span class="radio"></span>
        <span>男</span>
    </label>

    <label class="radio-item">
        <input name="gender" type="radio">
        <span class="radio"></span> 
        <span>女</span>
    </label>
</p>

<style>
    .radio-item .radio {
        width: 12px;
        height: 12px;
        border: 1px solid #999;
        border-radius: 50%;
        cursor: pointer;
        display: inline-block;
    }

    .radio-item input:checked+.radio::after {
        content: "";
        display: block;
        width: 5px;
        height: 5px;
        background: #008c8c;
        margin-top: 3.5px;
        margin-left: 3.5px;
        border-radius: 50%;
    } 

    .radio-item input:checked+.radio {
        border-color: #008c8c;
    }

    .radio-item input:checked~span{
        color: #008c8c;
    } 

    .radio-item input[type="radio"] {
        display: none;
    }

</style>

控制单选和多选的样式.png

4、美化表单元素

新的伪类

常见用法

推荐阅读更多精彩内容