css制作选择题 |新闻轮播css

<style>
/* 隐藏所有的选项框 */
input[type="radio"] {
display: none;
}
/* 给选项框加上样式 */
input[type="radio"] + label {
display: inline-block;
padding: 10px 20px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}
/* 设置选中状态的样式 */
input[type="radio"]:checked + label {
background-color: #ccc;
color: #fff;
}
/* 设置题目标题的样式 */
.question {
font-weight: bold;
font-size: 16px;
margin-bottom: 10px;
}
</style>

上述CSS代码主要实现了以下几个功能：

• 隐藏所有选项框，这样大家就可以自定义选项框的样式
• 给选项框加上样式，如设置填充、边框、边框半径和指针
• 设置选中状态下的样式，如设置选中的背景和字体颜色
• 设置题目标题的样式，如设置粗体和字体大小

制作选择题的HTML代码如下：

<div class="question">
1. 以下哪个城市是中国的首都？
</div>
<div class="answer">
<input type="radio" id="1-a" name="1" value="a">
<label for="1-a">上海</label>
<input type="radio" id="1-b" name="1" value="b">
<label for="1-b">北京</label>
<input type="radio" id="1-c" name="1" value="c">
<label for="1-c">广州</label>
</div>

上述HTML代码中，大家将答案作为输入框，每个输入框都有相同的name属性，这样就可以确保只有一个答案被选择。

以上就是CSS制作选择题的全部内容了。不要忘记对你的题目和选项框进行样式自定义，并确保你的HTML代码中的name属性设置正确。