CSS表单样式

定义文本框

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

html 复制代码
<!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>

设计单选按钮与复选框

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

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>

下拉菜单与列表框样式

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

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>
相关推荐
贵沫末2 分钟前
React——基础
前端·react.js·前端框架
每天开心7 分钟前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
aklry14 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9321 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子22 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982422 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug25 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo25 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机1 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js