用css怎样实现单选按钮的效果？-群英

用css怎样实现单选按钮的效果？

PHP中文网发表于 2021-09-09 17:38 次浏览

在实际的项目中，我们常会遇到实现单选按钮效果的需求，那么这要怎样做呢？下文小编就给大家来介绍，用用css实现单选按钮的实例，需要的朋友可以参考。

一、单选按钮控件语法

<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代码

<!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单选按钮

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：浅谈javascript数据类型转换之转换int类型

下一篇：在vue中引用css有哪些方式？怎样做？