web单选怎么设置

钟逸 Web 2025-05-07 11:52:54 19

作为网站页面设计中的一个基本元素，单选框可以帮助用户在多个选项中做出选择。在web开发中，设置单选框是必备技能。本文将分步指导您如何轻松设置web单选框。

HTML标记

单选框的HTML标记如下：


<input type="radio" name="option_name" value="option_value" checked>
<label for="option_name">Option Label</label>

* type="radio"指示该元素为单选框。

* name="option_name"指定单选框组的名称。同一组中的所有单选框必须具有相同的名称。

* value="option_value"指定该单选框的值。

* checked属性用于选中默认选项。

* 元素用于为单选框提供标签。for属性的值与单选框的name属性相对应。

CSS样式

您可以使用CSS样式定制单选框的外观，例如大小、颜色和排列方式。以下是一些常见样式：


/* 设置单选框大小和形状 */
input[type="radio"] {
  width: 16px;
  height: 16px;
  border: 1px solid      000;
  border-radius: 50%;
}
/* 设置单选框选中时的颜色 */
input[type="radio"]:checked {
  background-color:      000;
}
/* 设置单选框标签的样式 */
label {
  margin-right: 10px;
  font-size: 14px;
  line-height: 1.5;
}