CSS表单样式

CSS表单样式

radio和checkbox居中问题

当字体设置为12px和14px时,文本与单选框或复选框都不能垂直居中。

在这里插入图片描述

为了解决这个问题,可以使用vertical-align属性。

语法

当文字为12px时:
单选框或复选框 {
	vertical-align: -3px;
}

当文字为14px时:
单选框或复选框 {
	vertical-align: -2px;
}

使用

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            #p1 {
                font-size: 12px;
            }

            #p1 input {
                vertical-align: -3px;                
            }

            #p2 {
                font-size: 14px;
            }

            #p2 input {
                vertical-align: -2px;
            }
        </style>
    </head>
    <body>
        <p id="p1">
            <input id="radio1" type="radio" />
            <label for="radio1">单选框</label>
            <input id="checkbox1" type="checkbox" />
            <label for="checkbox1">复选框</label>
        </p>
        <p id="p2">
            <input id="radio2" type="radio" />
            <label for="radio2">单选框</label>
            <input id="checkbox2" type="checkbox" />
            <label for="checkbox2">复选框</label>
        </p>
    </body>
</html>

在这里插入图片描述

textarea

设置宽高

属性说明
width设置宽度
height设置高度
min-width设置最小宽度
min-height设置最小高度
max-width设置最大宽度
max-height设置最大高度
cols设置列数
rows设置行数

禁止拖动

textarea元素 {
	resize: none;
}

各浏览器实现相同效果

由于不同的浏览器显示的效果是不一样的,那么只能使用CSS的widthheight控制宽高,然后用overflow:auto定义textarea的滚动条。

表单对齐效果

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style type="text/css">
			form {
				width: 320px;
				font-family: Arial;
				font-size: 14px;
				font-weight: bold;
			}

			/*清除浮动*/
			p {
				overflow: hidden;
			}

			label {
				float: left;
				width: 60px;
				height: 40px;
				line-height: 40px;
				text-align: right;
				margin-right: 10px;
			}

			input:not(#submit) {
				float: left;
				height: 16px;
				padding: 10px;
				border: 1px solid silver;
			}

			#tel,
			#pwd {
				width: 228px;
			}

			#verifyCode {
				width: 118px;
				margin-right: 10px;
			}

			#submit {
				width: 100px;
				height: 40px;
				border: 1px solid gray;
				padding: 0;
				background-color: #F1F1F1;
			}
		</style>
	</head>
	<body>
		<form action="index.html">
			<p>
				<label for="tel">手机号</label>
				<input id="tel" type="text" />
			</p>
			<p>
				<label for="pwd">密码</label>
				<input id="pwd" type="password" />
			</p>
			<p>
				<label for="verifyCode">验证码</label>
				<input id="verifyCode" type="text" />
				<input id="submit" type="submit" />
			</p>
		</form>
	</body>
</html>

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值