一、Html选择框代码
Html选择框用于展示一组选项，使用标签为select，可以设置选项的默认值。
<select>
<option value="value1">文本1</option>
<option value="value2">文本2</option>
<option value="value3">文本3</option>
</select>
其中，value为选项的值，text为显示的文本。如果需要设置默认选中的选项，可以在option标签中添加selected属性，如：
<option value="value1" selected>文本1</option>
二、Html选择框控件
Html选择框可选择的控件主要包括单选框、复选框和下拉选择框。
单选框使用input标签，type属性为radio，name属性为选项组的名称（用于区分不同的选项组），value为选项的值，如：
<input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女
复选框使用input标签，type属性为checkbox，name属性和value属性同上。需要注意的是，复选框可以选择多个选项，因此同一个选项组中可能有多个被选中的选项，如：
<input type="checkbox" name="hobby" value="music">音乐 <input type="checkbox" name="hobby" value="sports">运动 <input type="checkbox" name="hobby" value="reading">阅读
下拉选择框使用select标签，option标签和前面介绍的相同。需要注意的是，下拉选择框只能选择一个选项，如：
<select name="fruit">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
</select>
三、Html选择框默认选中
可以通过在option标签中添加selected属性来设置默认选中的选项，如下面的例子中，文本2会被默认选中：
<select>
<option value="value1">文本1</option>
<option value="value2" selected>文本2</option>
<option value="value3">文本3</option>
</select>
对于单选框和复选框，可以通过checked属性设置默认选中状态：
<input type="radio" name="sex" value="male" checked>男
<input type="checkbox" name="hobby" value="music" checked>音乐
四、Html选择框打勾
针对复选框，我们可能需要在选中的选项前添加打勾的样式，可以使用CSS实现，在CSS中定义选中状态的样式，并将其应用到被选中的复选框中：
input[type="checkbox"]:checked + label:before {
content: "\2714";
font-size: 20px;
color: green;
}
其中，input[type="checkbox"]:checked + label:before 表示选中的复选框的前一个兄弟元素，即label标签前的元素。 \2714 是unicode字符中的打勾符号。
五、Html下拉选择框
针对下拉选择框，我们经常需要自定义其样式以美化界面，在CSS中使用伪类选择器选择select标签，并设置样式即可：
select {
font-family: Arial;
font-size: 16px;
padding: 10px;
width: 200px;
color: white;
background-color: black;
}
其中，padding是内边距，控制下拉选择框的大小；font-family和font-size分别是字体和字体大小；color和background-color分别是字体颜色和背景颜色。
六、Html复选框和单选框样式
和下拉选择框类似，我们可以通过CSS来实现自定义的样式。对于复选框和单选框，样式可以分别应用到input[type="checkbox"]和input[type="radio"]标签上。例如：
input[type="checkbox"], input[type="radio"] {
display: none;
}
input[type="checkbox"] + label, input[type="radio"] + label {
display: inline-block;
padding-left: 30px;
margin-bottom: 10px;
position: relative;
}
input[type="checkbox"] + label:before, input[type="radio"] + label:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
position: absolute;
left: 0;
top: 0;
border: 1px solid #ccc;
}
input[type="checkbox"] + label:before {
border-radius: 5px;
}
input[type="radio"] + label:before {
border-radius: 100%;
}
input[type="checkbox"]:checked + label:before {
content: "\2714";
font-size: 16px;
color: green;
background-color: #fff;
border: 1px solid green;
}
input[type="radio"]:checked + label:before {
content: "\25cf";
font-size: 18px;
color: green;
background-color: #fff;
border: 1px solid green;
}
其中，display: none;表示隐藏原始的复选框和单选框；使用伪类选择器选择标签前的元素进行自定义样式的设置。
七、Html创建一组多选框
我们可以使用多个复选框创建一个多选框组，选项名称必须相同，value值不同。如下面的例子中，fruit是选项组名称，apple、banana和orange是三个选项的value值：
<input type="checkbox" name="fruit" value="apple">苹果 <input type="checkbox" name="fruit" value="banana">香蕉 <input type="checkbox" name="fruit" value="orange">橙子
八、Html选择框怎么设置
Html选择框的设置包括选项的数量、默认选中的选项、选项的值和显示的文本等。在代码中可以通过添加属性来实现。如下面的例子中，设置了三个选项，其中选中了第二个选项：
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option>
<option value="guangzhou">广州</option>
</select>
九、Html选择框打勾代码
Html选择框的打勾样式可以通过CSS代码来实现，在CSS中定义选中状态的样式，如下例子中，使用伪类选择器选中选中的复选框并设置其样式：
input[type="checkbox"]:checked + label:before {
content: "\2714";
font-size: 16px;
color: green;
background-color: #fff;
border: 1px solid green;
}
其中，\2714 是unicode字符中的打勾符号；input[type="checkbox"]:checked + label:before 表示选中的复选框的前一个兄弟元素，即label标签前的元素。
