Question

我正在尝试创建一些使用CSS进行样式化并隐藏它们的单选按钮和复选框。但我正在努力定位他们。我可以让按钮和方框消失并根据被激活的方式改变外观，但是当我将它们放置为例如从左侧100px和100px向下时它们不会移动它们保持一致。

＆＃13;

@charset "utf-8";
/* CSS Document */
#COM1TX {
	left:200px;
	top:500px;
	position:relative
	
}
#COMRX {
	left: 0px;
	top: 100x;
	position: absolute;
	cursor: crosshair;
}
.radios .radio{
	display: inline-block;
	background-color: #000000;
	color: #FFFFFF;
	left: 200px;
	top: 500px;
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
}
.radios input[type=radio]{	
    display:none;
}

.radios input[type=radio]:checked + .radio{
	background-color: #ffffff;
	color: #000000;
	line-height: 100px;
	text-align: center;
}

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="TEST2.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="radios">
<input type="radio" name="COMTX" id="COM1TX">
<label class="radio" for="COM1TX">COM 1 Tx</label>
</div>
<div>
<input type="checkbox" name="COMRX" id="COMRX">
<label for="COMRX">COM 1,2 Rx</label>
</div>
<div class="radios">
<input type="radio" name="COMTX" id="COM2TX">
<label class="radio" for="COM2TX">COM 2 Tx</label>
</div>



</body>
</html>

＆＃13;

Answer 1

在这里使用position: relative，您就可以将它们移动到任何地方

 .radios .radio{
        position: relative;
        display: block;
        background-color: #000000;
        color: #FFFFFF;
        left: 200px;
        top: 8px;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }

<强> Live Demo

隐藏复选框和单选按钮并使用CSS

1 个答案: