美化表单

美化表单

新的伪类

1. :focus：元素聚焦
   所有元素都有聚焦，可通过元素的tabindex属性的大小，设置tab键元素聚焦时的顺序

	.box:focus{
		outline: none;
		outline-offset: 0;
	}

2. :checked：表示单选框或多选框被选中的样式（很少样式可设置）

	input:checked + label{
		color: #ccc;
	}

常见用法

1. 重置表单元素样式

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

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

2. 设置textarea是否可调整尺寸
   resize属性

• both：默认值，两个方向上均可调整
• none：均不可调整
• horizontal：水平方向上可以调整
• vertical：垂直方向上可以调整

	textarea{
		resize: 
	}

3. 文本框内容到边框的距离
   （1）padding
   （2）text-indent

	input[type="text"]{
		padding: 2px 3px;
	}

4. 控制单选和多选的样式
   自己做单选框

	.radio{
		...
	}
	input:checked + .radio{
		...
	}
	input:checked + .radio::after{
		content: "";
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		margin: 4px;
	}
	input[type="radio"]{
		display: none;
	}

	<label>
		<input name="sex" type="radio">
		<span class="radio"></span>
		<span >male</span>
	</label>