通过 🎓 在线互动课程、📺 教育视频和 🧑🏻‍💻项目构建教程学习 CSS。
下载

赞助

Route Planner and Route Optimizer

单选按钮


本地格式的互斥的单选按钮

radio 类是 <input type="radio"> HTML 元素的简单包装。它有意不进行样式设置,以保留跨浏览器兼容性和用户体验。

确保链接的单选按钮的 name HTML 属性具有相同的值

<div class="control">
  <label class="radio">
    <input type="radio" name="answer" />
    Yes
  </label>
  <label class="radio">
    <input type="radio" name="answer" />
    No
  </label>
</div>

您可以通过将 checked HTML 属性添加到 <input> 元素来默认选中一个单选按钮。

<div class="control">
  <label class="radio">
    <input type="radio" name="foobar" />
    Foo
  </label>
  <label class="radio">
    <input type="radio" name="foobar" checked />
    Bar
  </label>
</div>

您可以通过将 disabled HTML 属性添加到 <label><input>禁用一个单选按钮。

<div class="control">
  <label class="radio">
    <input type="radio" name="rsvp" />
    Going
  </label>
  <label class="radio">
    <input type="radio" name="rsvp" />
    Not going
  </label>
  <label class="radio" disabled>
    <input type="radio" name="rsvp" disabled />
    Maybe
  </label>
</div>

单选按钮列表 #

如果要列出多个单选按钮,请将它们包装在 <div class="radios"> 元素中

<div class="radios">
  <label class="radio">
    <input type="radio" name="rsvp" />
    Going
  </label>
  <label class="radio">
    <input type="radio" name="rsvp" />
    Not going
  </label>
  <label class="radio" disabled>
    <input type="radio" name="rsvp" disabled />
    Maybe
  </label>
</div>

如何支持 Bulma

#native_company# #native_desc#
#native_cta#
免费开始使用
免费开始使用