1、首先打开编辑器，然后新建一个html文件，编写入基本的框架。
2、然后用form，input和label创建一个单项选择题。
3、创建一个新的css文件，并且用link标签关联HTML文件。
4、然后撤销一下原来按钮的样式。
nput[type="radio"] {
display: none
}
5、nput[type='radio'] + label:before{
content: ""
display: inline-block
width: 20px
height: 20px
border: 2px solid gold
}
首先设置未点击的单选框样式，用border来设置颜色。
6、nput[type='radio']:checked + label:before{
background-color: red
}
接着设置点击后的背景颜色，这里用background-color。
7、最后运行一下，完成效果图。
单选表单的话，表示这一组选项的input的type设置为radio且name值必须一致：
将input标签置于label中，点击label的时候会自动选择里面的input；
input与label是独立分开的，关联两者的是input的id值和label的for值；两者一致的时候，点击label相当于触发关联的input，两者不相邻依然有效；
例子：
12345678<form action="">
<input id="fruit1" type="radio" name="fruit" value="苹果" />
<label for="fruit1">苹果</label>
<input id="fruit2" type="radio" name="fruit" value="香蕉" />
<label for="fruit2">香蕉</label>
<input id="fruit3" type="radio" name="fruit" value="橘子" />
<label for="fruit3">橘子</label>
</form>
单选框RADIO单选框能够进行项目的单项选择，以一个圆框选择。
基本语法
<input
type="radio"
name="field＿name"
checked
value="'value"
>
语法解释
checked表示此项被默认选中，field＿name是单选框的名称，用于服务器端接收参数使用，就像你自己的名字一样，
value表示选中项目后传送到服务器端的值。
文件范例：11-10.htm
在页面中插入单选框。
01
<!--
------------------------------
-->
02
<!--
文件范例：11-10.htm
-->
03
<!--
文件说明：插入单选框
-->
04
<!--
------------------------------
-->
05
<html>
06
<head>
07
<title>插入单选框</title>
08
</head>
09
<body>
10
<h1>用户调查</h1>
11
<Form
action=mailto:tslxg@hotmail.com
method=get
name=invest>
12
姓名：<input
type="text"
name="username"
size=20><br>
13
网址：<input
type="text"
name="url"
size=20
maxlength=50
value="http://"><br>
14
密码：<input
type="password"
name="password"
size=20
maxlength=8><br>
15
确认密码：<input
type="password"
name="password_confirm"
size=20
maxlength=8><br>
16
请上传你的照片：<input
type="File"
name="File"><br>
17
请选择你喜欢的音乐：
18
<input
type="checkbox"
name="m1"
value="rock"
checked>摇滚乐
19
<input
type="checkbox"
name="m2"
value="jazz">爵士乐
20
<input
type="checkbox"
name="m2"
value="pop">流行乐<br>
21
请选择你居住的城市：
22
<input
type="radio"
name="city"
value="beijing"
checked>北京
23
<input
type="radio"
name="city"
value="shanghai">上海
24
<input
type="radio"
name="city"
value="nanjing">南京
25
</Form>
26
</body>
27
</html>
文件说明
第22行到第24行就是插入的单选框。其中每一个单选框的名称是相同的，有其独立的值，"北京"项目是被默认选中的。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）