本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。
在css中,可以使用radio对象制作单选,只需要在input元素中设置“”样式即可。单选按钮是表示一组互斥选项按钮中的一个;当一个按钮被选中,之前选中的按钮就变为非选中的。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
一、单选按钮控件语法
1 | < input name = "Fruit" type = "radio" value = "" />
|
使用html input标签,name为自定义,type类型为“radio”的表单,
Radio 对象代表 HTML 表单中的单选按钮。
在 HTML 表单中 <input type="radio"> 每出现一次,一个 Radio 对象就会被创建。
单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中,之前选中的按钮就变为非选中的。
当单选按钮被选中或不选中时,该按钮就会触发 onclick 事件句柄。
您可通过遍历表单的 elements[] 数组来访问 Radio 对象,或者通过使用 document.getElementById()。
二、radio单选按钮语法案例
html代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" />
<meta http-equiv= "X-UA-Compatible" content= "IE=edge" />
<meta name= "viewport" content= "width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action= "" method= "get" >
您最喜欢水果?<br /><br />
<label><input name= "Fruit" type= "radio" value= "" />苹果 </label>
<label><input name= "Fruit" type= "radio" value= "" />桃子 </label>
<label><input name= "Fruit" type= "radio" value= "" />香蕉 </label>
<label><input name= "Fruit" type= "radio" value= "" />梨 </label>
<label><input name= "Fruit" type= "radio" value= "" />其它 </label>
</form>
</body>
</html>
|
截图
推荐学习:css视频教程
以上就是css中的单选怎么做的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css给图片添加水印
css选择器first-child与first-of-type之间有什么区别?
css规则是什么
css定位方式有哪几种
css怎么设置字体白色描边
怎么设置css字体单行居中
html css怎么设置字体大小
利用css完成一个悬停过渡动画的项目(超级简单)
如何解决eclipse css文件乱码问题
html5实践-使用css实现弹性视频的代码分享
更多相关阅读请进入《radio》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css中的单选怎么做