Question

我有此测试页，我想避免在我选中/取消选中复选框时出现界定元素的小矩形。

如果我使用Google Chrome浏览器并单击一个复选框，则可以看到出现了两个蓝色矩形，我想避免这种情况。我确定“用户选择：无；”是正确的css设置，但不起作用。有什么建议吗？

    <html>

	<head>
	
		<style>

		.noselect
		{-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		}	

		.SelectForm {
			-webkit-appearance: none;
			background-color: trasparent;
			border: 3px solid #02a494;
			padding: 0px;
			width: 26px;
			height: 26px;
			border-radius: 6px;
			display: inline-block;
			position: relative;
			top: 8px;
		}
		.SelectForm:checked:after {
			content: '✔';
			position: absolute;
			top: -6px; left: 1px;
			font-size: 26px;
			line-height: 0.6;
			color: #0C7B70;
			transition: all .2s;
			font-size: 32px;
		}
		.SelectForm:checked {
			background-color: trasparent;
			color: #0E9C8E;
			opacity: 1;
			transform: scale(1);
		}
		.SelectForm:hover
		{border: 3px solid #0E9C8E;
		cursor: pointer;
		}
	
	</style>
	
	</head>
	
	<body>
	
		<form>
		
			<input type="checkbox" checked class="noselect" class="SelectForm"><span>Test</span><br>
			<input type="checkbox" checked class="noselect" class="SelectForm"><span>Test</span><br>
			<input type="checkbox" checked class="noselect" class="SelectForm"><span>Test</span><br>
			<input type="checkbox" checked class="noselect" class="SelectForm"><span>Test</span><br>
			<input type="checkbox" checked class="noselect" class="SelectForm"><span>Test</span><br>
			
		</form>
	
	</body>

</html>

单击复选框时如何避免出现默认的浏览器矩形？

0 个答案: