【CSS学习笔记十三】表单_css 表单学习-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_28997735/article/details/100028195

一.输入框

input 
{
	width:100%;
}
/*使用 :focus 选择器可以设置输入框在获取焦点时的样式*/
input:focus
{
	background-color:lightblue;
}

设置指定类型的输入框可以使用以下属性选择器

input[type = text] ：选取文本输入框
input[type = password] ：选择密码的输入框
input[type = number] ：选择数字的输入框

二.文本框

注意: 使用 resize 属性来禁用文本框可以重置大小的功能（一般拖动右下脚可以重置大小）。

textarea
{
	width:100%;
	height:250px;
	border:2px solid green;
	border-radius:4px;
	resize:none;
}

三.下拉菜单

select
{
	width:100%;
	padding:12px 20px;
	margin:8px 0;
	border:none;
	border-radius:4px;
	background-color:lightgrey;
}

四.按钮

input[type = submit],input[type = reset],input[type = button]
{
	width:100%;
	padding:12px 20px;
	margin:8px 0;
	border:2px solid green;
	border-radius:4px;
	background-color:grey;
}

实例：

<!DOCTYPE html>
<html>
	<head>
		<style>
			input
			{
				width:100%;
				padding:12px 20px;
				margin:8px 0;
				border:2px solid green;
				border-radius:4px;
				/*box-sizing告诉浏览器去理解你设置的边框和内边距的值是包含在width内的*/
				box-sizing:border-box;
			}	
			/*使用 :focus 选择器可以设置输入框在获取焦点时的样式*/
			input:focus
			{
				border:3px solid red;
				background-color:lightblue;
			}
			textarea
			{
				width:100%;
				height:250px;
				padding:12px 20px;
				margin:8px 0;
				border:2px solid green;
				border-radius:4px;
				box-sizing:border-box;
				resize:none;
			}
			select
			{
				width:100%;
				padding:12px 20px;
				margin:8px 0;
				border:none;
				border-radius:4px;
				background-color:lightgrey;
			}
			input[type = submit]
			{
				width:100%;
				padding:12px 20px;
				margin:8px 0;
				border:2px solid green;
				border-radius:4px;
				background-color:grey;
			}
			.container
			{
				margin:5px 10px;
				padding:10px 20px;
				border-radius:4px;
				background:#f2f2f2;
			}
		</style>
		<meta charset = "utf-8"/>
		<title>表单</title>
	</head>
	<body>
		<div class = "container">
			<form>
				<label for  = "fname">First Name</label>
				<input type = "text" id = "fname" name = "fname">
				<label for  = "lname">Last Name</label>
				<input type = "text" id = "lname" name = "lname">			
				国家：
				<select id = "country" name = "country">
					<option>中国</option>
					<option>美国</option>
					<option>英国</option>
				</select>
				想说的话？
				<textarea>Some text</textarea>
				<input type = "submit" value = "提交">			
			</form>
		</div>
	</body>
</html>

结果：
在这里插入图片描述