单选框
单选框布局
单选框布局非常简单
<!-- radio element -->
<label class="radio">
<!-- radio input -->
<input type="radio" />
<!-- radio icon -->
<i class="icon-radio"></i>
</label>单选框组/列表
要创建单选框组/列表，我们需要使用带有一些附加功能的列表视图
<div class="list">
<ul>
<!-- Single radio item -->
<li>
<label class="item-radio item-content">
<!-- Radio input -->
<input type="radio" name="my-radio" value="radio-1" />
<!-- Radio icon -->
<i class="icon icon-radio"></i>
<div class="item-inner">
<!-- Radio Title -->
<div class="item-title">Books</div>
</div>
</label>
</li>
<!-- Another radio item -->
<li>
<label class="item-radio item-content">
<!-- Checked by default -->
<input type="radio" name="my-radio" value="radio-2" checked />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title">Music</div>
</div>
</label>
</li>
...
</ul>
</div>item-content必须是带有附加item-radio类的<label>元素- 单选输入（
<input type="radio" />）必须是item-content的第一个子级 - 单选图标必须在单选输入 后面
单选图标位置
默认情况下，单选列表项图标显示在 iOS 主题列表项的末尾，而在 MD 主题列表项的开始位置。
并且可以覆盖此行为以指定单选列表项图标的位置 - 在列表项的开头或结尾。
为此，我们需要向 item-radio 添加附加的 item-radio-icon-start 或 item-radio-icon-end 类
<!-- Additional "item-radio-icon-start" class will force radio icon to appear in the beginning of the list item for all themes -->
<li>
<!-- Additional "item-radio-icon-start" class -->
<label class="item-radio item-radio-icon-start item-content">
<!-- Radio input -->
<input type="radio" name="my-radio" value="radio-1" />
<!-- Radio icon -->
<i class="icon icon-radio"></i>
<div class="item-inner">
<!-- Radio Title -->
<div class="item-title">Books</div>
</div>
</label>
</li>
<!-- Additional "item-radio-icon-end" class will force radio icon to appear in the end of the list item for all themes -->
<li>
<!-- Additional "item-radio-icon-end" class -->
<label class="item-radio item-radio-icon-end item-content">
<!-- Radio input -->
<input type="radio" name="my-radio" value="radio-1" />
<!-- Radio icon -->
<i class="icon icon-radio"></i>
<div class="item-inner">
<!-- Radio Title -->
<div class="item-title">Books</div>
</div>
</label>
</li>
CSS 变量
以下是 CSS 变量（CSS 自定义属性）的相关列表。
请注意，带注释的变量在默认情况下未指定，它们的默认值是它们在这种情况下回退到什么。
:root {
/*
--f7-radio-active-color: var(--f7-theme-color);
*/
--f7-radio-border-radius: 50%;
--f7-radio-extra-margin: 0px;
}
:root .dark,
:root.dark {
--f7-radio-inactive-color: rgba(255, 255, 255, 0.3);
}
.ios {
--f7-radio-size: 22px;
--f7-radio-border-width: 1px;
--f7-radio-inactive-color: #c7c7cc;
}
.md {
--f7-radio-size: 20px;
--f7-radio-border-width: 2px;
--f7-radio-inactive-color: #6d6d6d;
}
示例
radio.html
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="title">Radio</div>
</div>
</div>
<div class="page-content">
<div class="block-title">Inline</div>
<div class="block block-strong-ios block-outline-ios">
<p>Lorem <label class="radio"><input type="radio" name="demo-radio-inline"><i class="icon-radio"></i></label>
ipsum dolor sit amet, consectetur adipisicing elit. Alias beatae illo nihil aut eius commodi sint eveniet
aliquid eligendi <label class="radio"><input type="radio" name="demo-radio-inline"><i
class="icon-radio"></i></label> ad delectus impedit tempore nemo, enim vel praesentium consequatur nulla
mollitia!</p>
</div>
<div class="block-title">Radio Group</div>
<div class="list list-strong-ios list-outline-ios list-dividers-ios">
<ul>
<li>
<label class="item-radio item-radio-icon-start item-content">
<input type="radio" name="demo-radio-start" value="Books" checked />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title">Books</div>
</div>
</label>
</li>
<li>
<label class="item-radio item-radio-icon-start item-content">
<input type="radio" name="demo-radio-start" value="Movies" />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title">Movies</div>
</div>
</label>
</li>
<li>
<label class="item-radio item-radio-icon-start item-content">
<input type="radio" name="demo-radio-start" value="Food" />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title">Food</div>
</div>
</label>
</li>
<li>
<label class="item-radio item-radio-icon-start item-content">
<input type="radio" name="demo-radio-start" value="Drinks" />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title">Drinks</div>
</div>
</label>
</li>
</ul>
</div>
<div class="list list-strong-ios list-outline-ios list-dividers-ios">
<ul>
<li>
<label class="item-radio item-radio-icon-end item-content">
<input type="radio" name="demo-radio-end" value="Books" checked />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title">Books</div>
</div>
</label>
</li>
<li>
<label class="item-radio item-radio-icon-end item-content">
<input type="radio" name="demo-radio-end" value="Movies" />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title">Movies</div>
</div>
</label>
</li>
<li>
<label class="item-radio item-radio-icon-end item-content">
<input type="radio" name="demo-radio-end" value="Food" />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title">Food</div>
</div>
</label>
</li>
<li>
<label class="item-radio item-radio-icon-end item-content">
<input type="radio" name="demo-radio-end" value="Drinks" />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title">Drinks</div>
</div>
</label>
</li>
</ul>
</div>
<div class="block-title">With Media Lists</div>
<div class="list media-list list-strong-ios list-outline-ios list-dividers-ios">
<ul>
<li>
<label class="item-radio item-radio-icon-start item-content">
<input type="radio" name="demo-media-radio" value="1" checked />
<i class="icon icon-radio" checked></i>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Facebook</div>
<div class="item-after">17:14</div>
</div>
<div class="item-subtitle">New messages from John Doe</div>
<div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut
turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
vel dui laoreet, commodo augue id, pulvinar lacus.</div>
</div>
</label>
</li>
<li>
<label class="item-radio item-radio-icon-start item-content">
<input type="radio" name="demo-media-radio" value="2" />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">John Doe (via Twitter)</div>
<div class="item-after">17:11</div>
</div>
<div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
<div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut
turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
vel dui laoreet, commodo augue id, pulvinar lacus.</div>
</div>
</label>
</li>
<li>
<label class="item-radio item-radio-icon-start item-content">
<input type="radio" name="demo-media-radio" value="3" />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Facebook</div>
<div class="item-after">16:48</div>
</div>
<div class="item-subtitle">New messages from John Doe</div>
<div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut
turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
vel dui laoreet, commodo augue id, pulvinar lacus.</div>
</div>
</label>
</li>
<li>
<label class="item-radio item-radio-icon-start item-content">
<input type="radio" name="demo-media-radio" value="4" />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">John Doe (via Twitter)</div>
<div class="item-after">15:32</div>
</div>
<div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
<div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut
turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
vel dui laoreet, commodo augue id, pulvinar lacus.</div>
</div>
</label>
</li>
</ul>
</div>
</div>
</div>