HTML进阶之美化表单元素

美化表单元素

新的伪类

1. focus

   表示元素聚焦时的样式

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

   tabindex属性可以设置聚焦顺序(即按下tab键时, 聚焦的顺序)

2. checked
   单选或多选框被选中时的样式
   单选框和单选框可以改变的样式极少, 一般用于改变子元素的样式

       <p>
       <input id="1" name="ge" type="radio">
       <label for="1">男</label>
       <input id="2" name="ge" type="radio">
       <label for="2">女</label>
   </p>
   

     input:checked+label{
           background-color: aquamarine;
       }
   

   

常见用法

1. 重置表单元素样式

2. 设置多行文本框(textarea)是否允许改变尺寸

   resize属性:
   - resize:both; 表示两个方向都可以调整尺寸
   - resize:none; 表示两个方向都不可以调整尺寸
   - resize: horizontal; 表示水平方向可以调整尺寸
   - resize: vertical; 表示垂直方向可以调整尺寸

3. 文本框边缘到文本内容的距离
   使用padding或者text-indent