CSS表单样式

文章目录

  • CSS表单样式
    • radio和checkbox居中问题
    • textarea
      • 设置宽高
      • 禁止拖动
      • 各浏览器实现相同效果
    • 表单对齐效果

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>

CSS表单样式_第1张图片

你可能感兴趣的:(#,CSS,&,Less,&,Sass,CSS,表单样式)