我想在每个主题矩形的右边做一个复选标记框。我想让这个框的宽度大约为一英寸，颜色为白色，当它被单击时显示为蓝色。
我怎样才能在html和css中做出正确的改变来解决这个问题呢？我做了一个复选框，但是我很难用css来操作复选框。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Select a Topic</title>
<link rel="stylesheet" href="style_landingpage.css">
</head>
<body>
<h1>Select a Topic</h1>
<label>
<input class="checkboxid" type="checkbox" name="topic">
<a href="game.html?topic=movies">
<button>Movies</button>
</a>
</label>
<label>
<input for="checkboxid1" class="checkboxid" type="checkbox" name="topic">
<a href="game.html?topic=music">
<button>Music</button>
</a>
</label>
<label>
<input class="checkboxid" type="checkbox" name="topic">
<a href="game.html?topic=countries">
<button>Countries</button>
</a>
</label>
<a href="game.html?topic=countries">
<button class="play-btn">Play</button>
</a>
</body>
</html>body {
background-color: black;
color: white;
text-align: center;
font-family: 'Times New Roman', Times, serif;
}
button {
display: block;
width: 2in;
height: 1in;
margin: 20px auto;
background-color: lightblue;
border: none;
border-radius: 5px;
color: black;
font-size: 24px;
font-weight: bold;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.play-btn {
width: 2in;
height: 50px;
background-color: #006400;
color: #fff;
border: none;
padding: 5px;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
}
input {
padding: 3px;
box-shadow: 3px 3px 5px white;
background-color: #006400 !important;
color: white;
font-size: 14px;
font-weight: 600;
width: 100px;
}
#checkboxid1 {
display: block;
}
1条答案
按热度按时间2guxujil1#
第一：标签中的put按钮标签错误。
同样，你可以使用
display:flex把复选框位置水平放置在主题矩形旁边。