CSS表单样式

最新推荐文章于 2024-05-31 14:59:34 发布

覆东流

最新推荐文章于 2024-05-31 14:59:34 发布

阅读量859

点赞数 27

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/qq_41807399/article/details/139032535

版权

前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

定义文本框

表单中可以设置CSS文本框，包括边框，背景，补白，大小，输入字体样式，圆角，阴影等样式。例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul,li{
				list-style-type: none;
			}
			input{
				width: 300px;
				height: 25px;
				font-size: 14px;
				line-height: 25px;
				border: 1px solid #339999;
				color: #ff0000;
				background-color: #99CC66;
			}
			textarea{
				width: 400px;
				height: 300px;
				line-height: 24px;
				border:  none;  //清除前面的边框影响
				border: 1px solid #ff7300;
				background: #99CC99;
				display: block;
			}
		</style>
	</head>
	<body>
		<form action="#">
			<ul>
				<li><label for="user">文本框：</label>
					<input type="text" value="颜色" name="user" id="user" />
				</li>
				<li><label for="text">文本区域：</label>
					<textarea name="text" id="text" cols="30" rows="10">背景</textarea>
				</li>
			</ul>


		</form>
	</body>
</html>

在这里插入图片描述

设计单选按钮与复选框

利用背景图片，更改单选按钮的样式和复选框的样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				font-family: '黑体';
				font-size: 16px;
			}
			form{
				position: relative;width: 600px;
				margin: 0 auto;
				text-align: center;
			}
			p{
				width: 200px;
				float: left;
				text-align: left;
			}
			input{
				position: absolute;
				left: -999em;
			}
			.radio1{
				padding-left: 30px;
			background: url("./单选按钮.png") ;
			background-position: -10px -22px;
			background-size: 20%;
			background-repeat: no-repeat;
			display: block;
			}
			.radio2{
				padding-left: 30px;
				background: url("./单选按钮.png") ;
				background-position: -10px 0;
				background-size: 20%;
				background-repeat: no-repeat;
				display: block;
			}
		</style>
	</head>
	<body>
		<form action="#">
			<h4>请选择你喜欢的浏览器</h4>
			<p>
				<input type="radio" checked id="radio0" value="radio" name="group" />
				<label for="radio0" class="radio2">EDGE</label>
			</p>
			<p>
				<input type="radio"  id="radio1" value="radio" name="group" />
				<label for="radio1" class="radio1">火狐</label>
			</p>
			<p>
				<input type="radio"  id="radio2" value="radio" name="group" />
				<label for="radio2" class="radio1">欧朋</label>
			</p>
			<p>
				<input type="radio" id="radio3" value="radio" name="group" />
				<label for="radio3" class="radio1">谷歌</label>
			</p>
			<p>
				<input type="radio"  id="radio4" value="radio" name="group" />
				<label for="radio4" class="radio1">世界之窗</label>
			</p>
			<p>
				<input type="radio"  id="radio5" value="radio" name="group" />
				<label for="radio5" class="radio1">夸克</label>
			</p>
			<p>
				<input type="radio"  id="radio6" value="radio" name="group" />
				<label for="radio6" class="radio1">悟空</label>
			</p>
		</form>
	</body>
</html>

在这里插入图片描述

下拉菜单与列表框样式

可以对下拉菜单的每一项单独设置背景颜色和文字效果，来区分不同的选项

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 120px;
				overflow: hidden;
			}
			select{
				width: 120px;
				border: none;
				color: #909993;
				height: 23px;
				line-height: 23px;
			}
			div{
				height: 200px;
				background-color: #3c9;
			}
			.b1{
				background-color: #000;
			}
			.b2{
				background-color: #ff0000;
			}
			.b3{
				background-color: #00ffff;
			}
		</style>
	</head>
	<body>
		<div>
			<select name="" id="">
			<option value="" class="b1">北京</option>
			<option value="" class="b2">上海</option>
			<option value="" class="b3">广东</option>
			<option value="" class="b4">深圳</option>
		</select>
		</div>
		
	</body>
</html>