I am trying to create some Radio Buttons and Check Boxes that use CSS for styling and hide them. But i am running into being able to position them. I can get the buttons and boxes to disappear and change the look depending on being activated or not, but when i go to place them for example 100px from left and 100px down they dont move they stay in line.
@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;
}
<!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>
Aucun commentaire:
Enregistrer un commentaire