jquery实现后台问卷调查添加多个问题选项表单效果代码

代码语言:html

所属分类:表单美化

代码描述:jquery实现后台问卷调查添加多个问题选项表单效果代码

代码标签: 问卷调查 添加 多个 问题 选项 表单 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

	</head>
	<style type="text/css">
		.box {
			width: 600px;
			height: 100%;
			border: 1px solid gainsboro;
		}

		form input {
			display: block;
			margin: 10px;
			height: 30px;
			width: 230px;
			font-size: 14px;
			background: #fff;
			text-align: left;
			line-height: 30px;
			border-radius: 3px;
			padding-left: 10px;
			border: 1px solid #ccc;
		}

		.question {
			margin-left: 10px;
			display: flex;
			justify-content: flex-end;
			/* justify-content: space-between; */
		}

		.content {
			margin-left: 10px;
		}

		button {
			height: 30px;
			width: 100px;
			background: #fff;
			margin: 10px;
			border-radius: 3px;
			border: 1px solid #ccc;
		}

		.content b {
			float: left;
			padding: 16px 3px;
		}

		.choose {
			margin-left: 20px;
		}

		.choose button {
			margin: 0;
			padding: 0;
			width: 60px;
		}

		.choose button:hover {
			color: #01AAED;
		}

		.choose button:first-child {
			border-right: 0;
			border-radius: 3px 0 0 3px;
		}

		.choose button:last-child {
			margin-left: -5px;
			border-radius: 0 3px 3px 0;
		}

		.check {
			border: 1px solid #01AAED !important;
			box-shadow: 0px 1px 5px #90d6fa;
			position: sticky;
			color: #01AAED;
			z-index: 99;
		}
	</style>
	<body>.........完整代码请登录后点击上方下载按钮下载查看

网友评论0